使用axios實現上傳圖片進度條

 　　在最近作的項目中，一個手機頁面最多要上傳幾十張圖片，雖然對照片作了壓縮處理，不過最後仍是很大，若是網卡的話，上傳的時間不好，若是一直在loading的話，用戶都不知道什本身上傳了多少，爲了更直觀的展示上傳的進度，最好顯示進度條，和顯示上傳的百分比；

　　項目用的是vuejs框架，mint-ui作爲ui框架；請求的是vue官方推薦的axios（真的很強大）；在axios官方介紹了使用原生上傳處理進度事件（具體參考這裏，這裏有中文的axios官方介紹）：

　　

  onUploadProgress: function (progressEvent) {
    // 對原生進度事件的處理
  },

　　由於使用vuejs，對於接口的數據請求，爲方便管理，須要統一的管理。若是放在每一個組件裏，不方便往後的維護和管理；在reqwest.js文件裏，定義了一個uploadPhoto方法，該方法有三個參數，分別是參數，和兩個回調函數，參數就是咱們要上傳圖片的須要的額參數；而第一個回調函數，是獲取上傳進度包含的數據，第二回調是獲取上傳成功失敗，後臺返回的數據；來進行頁面的下一步操做。

    uploadPhoto(payload,callback1,callback2){
        axios({
            url:BASE_URL + '/handler/material/upload',
            method:'post',
            onUploadProgress:function(progressEvent){ //原生獲取上傳進度的事件
                if(progressEvent.lengthComputable){
                    //屬性lengthComputable主要代表總共須要完成的工做量和已經完成的工做是否能夠被測量
                    //若是lengthComputable爲false，就獲取不到progressEvent.total和progressEvent.loaded
                    callback1(progressEvent);
                }
            },
            data:payload
        }).then(res =>{
            callback2(res.data);
        }).then(error =>{
            console.log(error)
        })
    }

使用mint-ui組件裏的Progress組件，在data的方法裏定義該組件裏的變量precent，該變量是number類型，在定義的時候，注意；

    <mt-progress :value="precent" :bar-height="10">
      <div slot="end">{{Math.ceil(precent)}}%</div>
    </mt-progress>

把reqwest.js 這個文件import 進來，獲取到uploadPhoto這個方法，根據獲取上傳的進度，使用$nextTick 這個屬性，實時的更新的頁面上。

const _this = this;
API.uploadPhoto(fd,(res) =>{
  let loaded = res.loaded,
      total = res.total;
      _this.$nextTick(() =>{
        _this.precent = (loaded/total) * 100;
      })
},(res) =>{
    if(res.code === '200'){
        MessageBox.alert('圖片上傳成功').then(action => {
          console.log('ok');
        });
    }
})

 

　　根據上面的方法基本實現圖片的上傳進度和百分比的顯示，剩下的就是ui了，根據本身個性化定製來實現你那完美的需求...