axios如何為上傳圖片新增進度條

這次帶給大家axios如何為上傳圖片添加進度條，axios給上傳圖片添加進度條的注意事項有哪些，下面就是實戰案例，一起來看一下。

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">
   <p slot="end">{{Math.ceil(precent)}}%</p>
  </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');
    });
  }
})

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS的JSON資料分組如何最佳化

ajax直接改變狀態和刪除無刷新狀態

以上是axios如何為上傳圖片新增進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章！