axios 监听上传进度实现真实进度条

cherryFlower_KK

已于 2024-03-25 16:03:34 修改

阅读量1.2k

点赞数 10

文章标签：前端

于 2024-03-08 10:17:53 首次发布

本文链接：https://blog.csdn.net/m0_56233995/article/details/136554318

版权

项目中有一个上传文件的需求上传格式是formData。最开始是使用假的进度条，后面发现上传的文件有可能会有几百M，这时假的进度条就失去作用了。

Api接口

export function manuaImportData(data, config) {
  return service({
    url: `/bill/receive/import`,
    method: 'post',
    timeout: Infinity,
    // 上传时间 如果文件过大 超时时间设置为无穷大
    ...config,
    data
  })
}

实现页面

          // 我的进度条是一个弹窗 上传时就打开
          this.dialogVisible = true
          this.progressFlag = true // 这个是进度条的类名判断
          const data = this.formData.file
          const config = {
            onUploadProgress: progressEvent => {
              // progressEvent.loaded  ==> 已上传的大小
              //  progressEvent.total ==>  文件大小
              const percentCompleted = Math.round((progressEvent.loaded * 100) /                     
               progressEvent.total)
            // 进度条的数字
              this.percent = percentCompleted
            }
          }
          manuaImportData(data, config).then(res => {
            if (res.code === 200) {
                this.percent = 100
                this.dialogVisible = false
                this.progressFlag = false
                this.percent = 0
            }
          }).catch(err => {
            console.log(err)
            this.percent = 0
            this.progressFlag = false
            this.dialogVisible = false
          })