Axios all индикатор выполнения для нескольких асинхронных загрузок

Question

Я пытаюсь получить прогресс загрузки, чтобы показать как прогресс загрузки текущего файла, так и общий прогресс при загрузке нескольких файлов одновременно. Я не могу использовать классический способ с .loaded / .total, так как onUploadProgress вызывается несколько раз различными асинхронными запросами, поэтому процент будет просто перепрыгивать назад и вперед. С моим кодом ниже я могу по крайней мере показать прогресс для оставшихся файлов (например, 33%, когда 1 из 3 файлов был загружен), но он не учитывает, сколько файла загружено (поэтому он остается на 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))
      }
    })
  )
}