Question

我试图获取上传进度，以显示当前文件的上传进度，以及一次上传多个文件时的总进度。我无法对.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可以在其中获取总计并求和。谁能帮我这个忙吗？如果您有任何疑问或不清楚的地方，请发表评论（我希望它可以理解）

Answer 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))
      }
    })
  )
}

Axios全部进度条用于多个异步上传

1 个答案: