在平時項目開發中，我們經常會對文件做一些上傳操作，不僅僅要實現基本需求，也要兼顧用戶體驗，根據自己在工作中遇到的問題談談對圖片上傳的預覽以及上傳進度的優化。
1.搭建項目
基于Vue.js+axios搭建的項目，新建一個Index.Vue項目如下，基本結構可以先可以選擇文件，預覽文件。
上傳圖片
選擇文件：
圖片預覽：
上傳文件到服務器
...
data(){
return{
imgPreViewSrc:'', //文件預覽地址
file:null, //上傳文件
}
}
methods:{
}
...
.text-center{
text-align: center;
}
.wrapper{
font-size: 16px;
width: 60%;
height: 100%;
margin: 0 20%;
border: 1px solid #ddd;
img{
width: 200px;
}
button{
width:120px;
height: 30px;
margin-top: 30px;
line-height: 30px;
border: 1px solid #CCC;
text-align: center;
}
}
input的類型type設置為file,可以選擇文件，multipe屬性設置為true，一次可以選擇多個文件。
運行項目，頁面如下：
2.選擇文件以及預覽
選擇一個圖片文件(bg.jpg),之前有在input綁定文件改變監聽方法，打印事件參數如下：
發現剛才選擇的文件在Event>target>files下面
files是一個數組，剛才只選擇了一張圖片，所以長度為1，圖片的名稱(name)，大小(size)，類型(type)都有包含。
2.1.設置文件類型
在input標簽accept屬性設置文件類型，當用戶打開文件資源管理器選擇文件時，會過濾掉其他類型文件，能夠從源頭避免用戶選擇臟文件，也更加方便用戶選擇文件。
2.2.圖片預覽
要將用戶選擇的文件顯示到頁面上，以方便用戶下一步操作，因為用戶可能會從選擇的文件中再挑選幾張圖片操作，例如上傳到服務器。
圖片預覽要用到URL對象的URL.createObjectURL(file)方法生成一個blob地址，直接賦值給img標簽的src，頁面就可以展示。(URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。)
在methods添加handleFileChange方法，預覽圖片
...
// 文件改變監聽事件
handleFileChange(evt){
console.log(evt);
let file=evt.target.files[0];
this.file=file;
let src=URL.createObjectURL(file);
this.imgPreViewSrc=src;
},
...
3.顯示上傳文件進度
選擇好文件之后，文件要上傳到服務器，有時候文件很大或者網速很慢的情況下，用戶需要知道已經上傳進度，如果沒有上傳進度，用戶退出頁面那么文件就上傳失敗了。
3.1.修改script文件
引入axios,封裝上傳Promise函數
在methods里添加上傳方法uploadFile
import axios from 'axios';
// 文件上傳服務api
const baseURL='http://127.0.0.1/api';
function upload (params,cb=null) {
return new Promise((resolve, reject) => {
axios.create({
baseURL,
})({
url:'/upload/uploadFile/image',
method:'post',
data:params,
// 上傳進度
onUploadProgress:function(progressEvent){
if(progressEvent.lengthComputable && cb){
cb(progressEvent);
}
},
}).then(res => {
console.log(res.data);
if(res.status===200){
resolve(res.data);
}else{
reject(res.data);
}
}).catch(err => {
reject(err);
});
});
}
...
// 上傳文件到服務器
uploadFile(){
let file=this.file;
if(file){
let formData = new FormData();
formData.append('file', file);
upload(formData,(progressEvent)=>{
console.log(progressEvent);
});
}else{
alert('請選擇文件')
}
...
3.2.上傳進度
在axios入參新增onUploadProgress方法，在文件上傳過程中該方法會調用，參數包含上傳的一些信息。
有關ProgressEvent的一些介紹:
ProgressEvent 是一個用來測量底層操作進度的接口，可以測量HTTP請求(例如：一個 XMLHttpRequest請求、或者一個底層資源如img，audio，video等,ProgressEvent常用屬性值：
ProgressEvent.lengthComputable:它是一個布爾值標識，表明總共需要完成的工作量和已經完成的工作是否可以被底層所計算到。換而言之，它表示的就是過程是否是可以測量的。
ProgressEvent.loaded:是一個unsigned long long類型，表示底層進程已經執行的工作量。所做的工作比率可以用屬性和ProgressEvent.total計算。當使用HTTP下載資源時，這只表示內容本身的一部分，而不是頭和其他開銷。
ProgressEvent.total:是unsigned long long類型，表示底層進程正在執行的工作總量。當使用HTTP下載資源時，這只表示內容本身，而不是頭和其他開銷。
點擊上傳按鈕，打開控制臺：
可以發現ProgressEvent中loaded屬性值為圖片文件上傳的大小，total為文件的大小。
3.3.在頁面添加進度條
為了組件通用化，新建一個Progress.vue組件,接受一個progressValue進度參數。
上傳進度：{{progressValue}}%
上傳成功!
export default {
props:['progressValue'],
name: 'Progress',
};
.progress-box{
position: fixed;
top:0;
left:0;
bottom: 0;
right:0;
background: rgba(0,0,0,0.5);
.progress-content{
position: absolute;
top:50%;
left:50%;
width: 300px;
height: 76px;
padding: 8px 30px;
transform: translate(-150px,-38px);
background: #fff;
border-radius: 8px;
p{
margin-bottom: 5px;
}
progress{
width: 100%;
height: 22px;
}
progress::-webkit-progress-bar{
background-color:#d7d7d7;
}
progress::-webkit-progress-value{
background-color:orange;
}
}
}
在div末尾添加Progress組件，再修改Index.vue文件methods的上傳方法：
...
import Progress from '../components/Progress';
...
// 上傳文件到服務器
uploadFile(){
let file=this.file;
if(file){
let formData = new FormData();
formData.append('file', file);
upload(formData,(progressEvent)=>{
this.isShowProgressBox=true;
this.progressValue=parseFloat((progressEvent.loaded/progressEvent.total*100).toFixed(2));
if(this.progressValue===100){
let timer=setTimeout(()=>{
this.isShowProgressBox=false;
clearTimeout(timer);
timer=null;
},500);
}
});
}else{
alert('請選擇文件');
}
...
可以看到，點擊上傳后，頁面出現進度模態框，讓用戶知道已經上傳百分比，優化用戶體驗。
關于圖片上傳其實還能優化的方面還有很多，后續在工作中遇到問題再加以論述。
)
)
)
的方法)
