在axios中获取文件上传进度

17 篇文章 0 订阅
14 篇文章 0 订阅

 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 按需处理
 }

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值