onUploadProgress 允許為上傳處理進(jìn)度的事件感憾，是axios的請(qǐng)求配置之一式曲。

import fetch from '@/libs/fetch.js';
/*  上傳文件  */
function audioUpload(e, callback) {
  let headers = {
    'Content-Type': 'multipart/form-data',
  };
  return fetch({
    headers,
    url: '/api/upload',
    method: 'POST',
    data: e,
    onUploadProgress: process => {
      callback(process)
    }
  })
}

      audioUpload(formData,(process) => {     
       // progress.loaded表示當(dāng)前上傳的數(shù)據(jù)大小，progress.total表示整個(gè)要上傳的數(shù)據(jù)大小
      }).then(e => {
        // 
      }).catch(e => {
       //
      })

封裝axios的fetch.js

// import iView from 'iview';
import axios from 'axios';
import Util from './util';
import router from '@/router'
import {setCookie, getCookie, clearAllCookie, delCookie} from "./cookie";
// 區(qū)分項(xiàng)目生產(chǎn)環(huán)境還是開(kāi)發(fā)環(huán)境亿汞，匹配對(duì)應(yīng)的API地址
let headers = {
  // 'Content-Type': 'multipart/form-data',
  'Content-Type': 'application/json;charset=UTF-8'
};
let responseType = "json";
// const api = Util.BASE_URL;
const api = process.env.VUE_APP_BASE_URL
// 創(chuàng)建axios實(shí)例
const service = axios.create({
  baseURL: api,  // 域名URL
  // `headers` 是即將被發(fā)送的自定義請(qǐng)求頭
  headers: headers,
  // 請(qǐng)求超時(shí)時(shí)間
  timeout: 60 * 1000,
  // `withCredentials` 表示跨域請(qǐng)求時(shí)是否需要使用憑證
  withCredentials: true, // 默認(rèn)的
  // `responseType` 表示服務(wù)器響應(yīng)的數(shù)據(jù)類型淳梦，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: responseType || 'json', // 默認(rèn)的
  // `maxContentLength` 定義允許的響應(yīng)內(nèi)容的最大尺寸
  maxContentLength: 20000,
  // `transformRequest` 允許在向服務(wù)器發(fā)送前艾船，修改請(qǐng)求數(shù)據(jù)
  transformRequest: [function (data) {
    // console.log(data)
    return data;
  }],
  // `transformResponse` 在傳遞給 then/catch 前，允許修改響應(yīng)數(shù)據(jù)
  transformResponse: [function (data) {
    // console.log(data);
    // 對(duì) data 進(jìn)行任意轉(zhuǎn)換處理
    return data;
  }],
  // onUploadProgress: progressEvent => {
  //     // let percent = progressEvent.loaded / progressEvent.total * 100 | 0
  //     console.log(progressEvent)
  //   return progressEvent
  // }

});
let count = 0;
// 添加請(qǐng)求攔截器
service.interceptors.request.use(function (config) {
  count++;
  if (config.url.indexOf('mock/send') < 0) {
  }
  // 在發(fā)送請(qǐng)求之前做些什么
  //cookie 如果丟失  跳轉(zhuǎn)到登錄頁(yè)面
  // setCookie('userToken','uiplat:d7pd52ld6qzdatgi');
  
  let userToken = getCookie('token') || '';
  if (userToken) {
    config.headers['X-Token'] = userToken;
  } else {
    delCookie('token');
    // router.push('/login')
  }
  return config;

}, function (error) {
  // 對(duì)請(qǐng)求錯(cuò)誤做些什么
  return Promise.reject(error);
});

// 添加響應(yīng)攔截器
service.interceptors.response.use(function (response) {
  if (response.status >= 400) {
    // iView.Spin.hide();
    count = 0;
    // router.push('/Error');
  }
  if (response.status === 200 && response.headers.location) {
    window.location = response.headers.location;
    return false;
  }
  if (response.status === 200 && response.data && response.data.errno && response.data.errno === 'ECONNREFUSED') {
    response.data = {
      code: 500,
      message: '鏈接服務(wù)器失敗'
    };
    // iView.Spin.hide();
    count = 0;
    // router.push('/Error');
    return response;
  }
  if (typeof response.data === 'string' && response.headers['content-type'].indexOf('audio') === -1) {
    response.data = JSON.parse(response.data);
  }
  localStorage.setItem('baseInfo', response.headers.userinfo);
  count--;
  if (count === 0) {
    // iView.Spin.hide();
  }
  if (parseInt(response.data.code) === 10006 || parseInt(response.data.code) === 9000) {
    response.data = {
      code: 1000,
      msg: '登錄信息已失效玩般，請(qǐng)重新登錄'
    };
    delCookie('userToken');
    // router.push('/login')
  }
  return response;
}, function (error) {
//   iView.Spin.hide();
  count = 0;
  // router.push('/Error');
  // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
  return Promise.reject(error);
});

export default service;