Axios：多个文件上传的上传进度

Question

在https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html之后，我设置了带有进度条的文件上传。

但是，我有<input type="file" multiple>，所以上载在这样的循环中：

for (var i=0; i<files.length; i++)
{
    var config = {
        onUploadProgress: function(progressEvent) {
            var what = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
        }
    };
    axios.post(url, data, config)
        .then(function (response) {
    });                            
}

问题是：如何将上传进度（请参阅参考var what）分配给相应的文件？

我尝试过的所有方法均无效：

• 回调函数onUploadProgress显然不需要第二个参数：https : //github.com/mzabriskie/axios#request-config

• 注入的progressEvent对象不包含有关上载文件的任何信息。例：

  progress { target: XMLHttpRequestUpload, isTrusted: true, lengthComputable: true, loaded: 181914, total: 181914, currentTarget: XMLHttpRequestUpload, eventPhase: 2, bubbles: false, cancelable: false, defaultPrevented: false, composed: false }
  

• 循环变量i原则上是可以访问的-但是，它始终位于最后一个位置（因为onUploadProgress在上载期间被调用时循环已完成）

• 我想不通data从内部访问axios的方法onUploadProgress

• this 指：

  XMLHttpRequestUpload { onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, ontimeout: null, onloadend: null }
  

还有其他想法吗？

Answer 1

您可以创建一个函数，该函数返回另一个带有某些Id作为参数的修饰函数。

例：

const myUploadProgress = (myFileId) => (progress) => {
  let percentage = Math.floor((progress.loaded * 100) / progress.total)
  console.log(myFileId)
  console.log(percentage)
}

for (var i=0; i<files.length; i++) {
  var config = {
    onUploadProgress: myUploadProgress(files[i].id)
  };

  axios.post(url, data, config).then(function (response) {});                            
}

如果没有ES6，则可以执行以下操作：

function myUploadProgress(myFileId) {
  return function(progress) {
    ...
  }
}

（我在我的项目上使用了类似的代码，它的工作原理就像一个咒语）