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

Features

從瀏覽器中創建 XMLHttpRequests

從 node.js 創建 http 請求

支持 Promise API

攔截請求和響應

轉換請求數據和響應數據

取消請求

自動轉換 JSON 數據

客戶端支持防御 XSRF

下面給大家介紹使用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了，根據自己個性化定制來實現你那完美的需求...

總結

以上所述是小編給大家介紹的使用axios實現上傳圖片進度條功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！