vue里面配合axios完成配置进度条onUploadProgress

在项目中经常遇到上传文件，这时又需要查看上传的进度，就可以用到axios进度条事件；onUploadProgress；

1.axios封装的请求函数；通过callback回调函数返回进度的数据

export function uploadFileOss(data, callback) {
  //四舍五入后最接近的整数Math.round()
  let content_len = Math.round((data.file.size * 100) / 1024) / 100;
  let fd = new FormData();
  // 使用append方法来添加字段
  fd.append("Content-Length", content_len);
  fd.append("OSSAccessKeyId", data.OSSAccessKeyId);
  fd.append("policy", data.policy);
  fd.append("signature", data.signature);
  //文件名字
  fd.append("key", data.key);
  fd.append("dir", data.dir);
  fd.append("success_action_status", "200");
  //文件必须声明在最后，否则异常
  fd.append("file", data.file);
  fd.append("max_file_size", "100mb");
  // console.log(data);
  return axios({
    url: data.host,
    method: "POST",
    dataType: "xml",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    onUploadProgress: progressEvent => {
      // 原生获取上传进度的事件
      if (progressEvent.lengthComputable) {
       callback && callback(progressEvent);
      }
    },
    data: fd //请求数据
  });
}

2.接收返回回来的进度条数据

这里只写回调函数代码

e参数值为进度的数据

updateProgress(e) {
       //e为回调回来的参数 通过进行和total的值来进行进度
      this.percentState = parseInt((e.loaded / e.total) * 100); 
    },

主要通过axios请求的时候加载中会一直返回进度条 所以一直调用进度条事件，直到完成。