使用axios實(shí)現(xiàn)上傳圖片進(jìn)度條功能

Axios 是一個(gè)基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

Features

從瀏覽器中創(chuàng)建 XMLHttpRequests

從 node.js 創(chuàng)建 http 請求

支持 Promise API

攔截請求和響應(yīng)

轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)

取消請求

自動轉(zhuǎn)換 JSON 數(shù)據(jù)

客戶端支持防御 XSRF

下面給大家介紹使用axios實(shí)現(xiàn)上傳圖片進(jìn)度條功能，具體內(nèi)容介紹如下所示：

　在最近做的項(xiàng)目中，一個(gè)手機(jī)頁面最多要上傳幾十張圖片，雖然對照片做了壓縮處理，不過最后還是很大，如果網(wǎng)卡的話，上傳的時(shí)間很差，如果一直在loading的話，用戶都不知道什自己上傳了多少，為了更直觀的展現(xiàn)上傳的進(jìn)度，最好顯示進(jìn)度條，和顯示上傳的百分比；

　　項(xiàng)目用的是vuejs框架，mint-ui做為ui框架；請求的是vue官方推薦的axios（真的很強(qiáng)大）；在axios官方介紹了使用原生上傳處理進(jìn)度事件（具體參考這里，這里有中文的axios官方介紹）：

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

　　因?yàn)槭褂胿uejs，對于接口的數(shù)據(jù)請求，為方便管理，需要統(tǒng)一的管理。如果放在每個(gè)組件里，不方便日后的維護(hù)和管理；在reqwest.js文件里，定義了一個(gè)uploadPhoto方法，該方法有三個(gè)參數(shù)，分別是參數(shù)，和兩個(gè)回調(diào)函數(shù)，參數(shù)就是我們要上傳圖片的需要的額參數(shù)；而第一個(gè)回調(diào)函數(shù)，是獲取上傳進(jìn)度包含的數(shù)據(jù)，第二回調(diào)是獲取上傳成功失敗，后臺返回的數(shù)據(jù)；來進(jìn)行頁面的下一步操作。

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ //原生獲取上傳進(jìn)度的事件
        if(progressEvent.lengthComputable){
          //屬性lengthComputable主要表明總共需要完成的工作量和已經(jīng)完成的工作是否可以被測量
          //如果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類型，在定義的時(shí)候，注意； 

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

把reqwest.js 這個(gè)文件import 進(jìn)來，獲取到uploadPhoto這個(gè)方法，根據(jù)獲取上傳的進(jìn)度，使用$nextTick 這個(gè)屬性，實(shí)時(shí)的更新的頁面上。

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');
    });
  }
})

　　根據(jù)上面的方法基本實(shí)現(xiàn)圖片的上傳進(jìn)度和百分比的顯示，剩下的就是ui了，根據(jù)自己個(gè)性化定制來實(shí)現(xiàn)你那完美的需求...

總結(jié)

以上所述是小編給大家介紹的使用axios實(shí)現(xiàn)上傳圖片進(jìn)度條功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！