在axios中获取文件上传进度

 1.在axios 全局配置的文件中加入一个postFile 方法在上传文件时调用。

export function postFile(url, params,config) {
  return new Promise((resolve, reject) => {
    axios.post(url, params,config).then(res => {
      resolve(res);
    }).catch(err => {
      reject(err);
    })
  })
}

2.选择文件符合上传格式要求后,调用 uploadFile 上传

 async uploadFile(file){
      
      this.percentage = 0;
      this.fileName = file['name'];
      //进度条
      const uploadEvent = (progressEvent) => { 
        console.log('进度',progressEvent);
        let progressPercent = Number(
          ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
        );
        // 更具需要设置显示的进度,如上传错误需要有提示信息时,要求上传进度不是100
        this.percentage = progressPercent>=90 ? 90 : progressPercent; 
      };
      let formData = new FormData();
      formData.append('file',file);
      // 可使用formData.append 添加别的参数
      let config = {
        onUploadProgress: uploadEvent
      }
      let res = await postBaseFileXls(this.configs.url,formData,config);
      // todo 按需处理
 }

你可能感兴趣的:(vue,前端,js,前端,javascript)