使用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了,根據自己個性化定制來實現你那完美的需求...

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM