VUE获取请求进度

onUploadProgress 允许为上传处理进度的事件，是axios的请求配置之一。

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表示当前上传的数据大小，progress.total表示整个要上传的数据大小
      }).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";
// 区分项目生产环境还是开发环境，匹配对应的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
// 创建axios实例
const service = axios.create({
  baseURL: api,  // 域名URL
  // `headers` 是即将被发送的自定义请求头
  headers: headers,
  // 请求超时时间
  timeout: 60 * 1000,
  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: true, // 默认的
  // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: responseType || 'json', // 默认的
  // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 20000,
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  transformRequest: [function (data) {
    // console.log(data)
    return data;
  }],
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // console.log(data);
    // 对 data 进行任意转换处理
    return data;
  }],
  // onUploadProgress: progressEvent => {
  //     // let percent = progressEvent.loaded / progressEvent.total * 100 | 0
  //     console.log(progressEvent)
  //   return progressEvent
  // }

});
let count = 0;
// 添加请求拦截器
service.interceptors.request.use(function (config) {
  count++;
  if (config.url.indexOf('mock/send') < 0) {
  }
  // 在发送请求之前做些什么
  //cookie 如果丢失  跳转到登录页面
  // 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) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
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: '链接服务器失败'
    };
    // 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: '登录信息已失效，请重新登录'
    };
    delCookie('userToken');
    // router.push('/login')
  }
  return response;
}, function (error) {
//   iView.Spin.hide();
  count = 0;
  // router.push('/Error');
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default service;