用于多个异步上传的 axios 所有进度条答案

【问题标题】：Axios all progress bar for multiple async uploads用于多个异步上传的 axios 所有进度条
【发布时间】：2019-07-01 07:57:51
【问题描述】：

我正在尝试获取上传进度以显示当前文件的上传进度，以及一次上传多个文件时的总进度。我不能使用 .loaded/.total 的经典方式，因为 onUploadProgress 会被不同的异步请求多次调用，所以百分比只会来回跳跃。使用下面的代码，我至少可以显示剩余文件的进度（例如，当 3 个文件中的 1 个已上传时为 33%），但它没有考虑文件的加载量（因此它保持在 0%直到整个文件都起来了，然后它会在一秒钟内跳到 33%）。

requests.push(
  axios.post(this.uploadUrl, formData, {
    onUploadProgress: progressEvent => {
      if (progressEvent.loaded === progressEvent.total) {
        this.progress.current++
      }

      // this.progress.percent = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total))
      this.progress.percent = parseInt(Math.round((this.progress.current * 100) / this.progress.total))
    }
  })
)

axios.all(requests)

我的问题是我不知道所有文件的progressEvent.total，我无法区分单个请求。也没有onUploadStart，我可以在其中获取总数并求和。谁能帮我解决这个问题？如果您有任何疑问或不清楚的地方，请发表评论（我希望它有点可以理解）

【问题讨论】：

你为什么不设置一个计算属性，它为每个请求分配一个设定值（比如有 3 个请求，所以每个请求 33%），然后你调整成功（或错误）中的依赖关系每个请求。类似.then(res => {...this.request1 = complete},

标签： vue.js upload axios

【解决方案1】：

如果有人偶然发现了这个问题，我最后用下面的代码修复了它。诀窍是计算每个文件的进度，将其保存到一个对象中（使用文件名作为键），然后将进度相加并除以总文件数。

// loop through all files and collect requests
for (let file of files) {
  let formData = new FormData()
  formData.append(file['name'], file)

  requests.push(
    axios.post(this.uploadUrl, formData, {
      onUploadProgress: progressEvent => {
        if (progressEvent.loaded === progressEvent.total) {
          this.progress.current++
        }
        // save the individual file's progress percentage in object
        this.fileProgress[file.name] = progressEvent.loaded * 100 / progressEvent.total
        // sum up all file progress percentages to calculate the overall progress
        let totalPercent = this.fileProgress ? Object.values(this.fileProgress).reduce((sum, num) => sum + num, 0) : 0
        // divide the total percentage by the number of files
        this.progress.percent = parseInt(Math.round(totalPercent / this.progress.total))
      }
    })
  )
}

【讨论】：