axios获取当前上传进度

有时候上传视频或者大文件时,后端迟迟没有返回回调,前端没有响应.
用户体验是非常不好的,这时候可以拿到axios的上传进度显示给用户看
onUploadProgress

---

我的axios是经过二次封装的,传给第三个参数
封装需要的axios

axios
 .post(url, data, FormData, {
     headers: {
       Authorization: !localStorage.token ? '' : localStorage.token,
     },
   })

具体请求,在第三个参数加上onUploadProgress 每个人封装axios风格不一样,具体请看实际情况

const res = await _this.$post(api,params,
   {
      //获取上传进度
      onUploadProgress:function(progressEvent){
        console.log('进度',progressEvent)  
      }
   }
).catch(error => {
   _this.$Message.error(error)
})

获取打印

获取total和loaded两个参数

---

（loaded/total).toFixed(1) = 当前上传进度

---

完成