Javascript Axios：多文件上载的上载进度

下面我用进度条设置了一个文件上传

但是，我有

，因此上传在如下循环中：

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) {
    });                            
}

循环变量

i

原则上是可访问的-但是，它始终位于最后一个位置（因为在上载过程中调用

onUploadProgress

时循环已完成）

我想不出从内部

onUploadProgress

此

指：

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

---

还有其他想法吗？

这是一个可变范围问题。在JavaScript

var

中，在函数作用域中声明一个变量。根据目标浏览器支持的ES版本，有很多潜在的解决方案。我将使用相同的函数演示：

setTimeout(function(){ console.log(i); }, i * 100);

使用

var

这将打印“5”次。我们想把它打印出来

01234

如果您有

Array#forEach

，您可以使用它，因为闭包创建了一个新的函数作用域

[0, 1, 2, 3, 4].forEach(function(i) { 
    setTimeout(function(){ console.log(i); }, i * 100);
});

如果您有权访问

let

，

let

和

const

则改用块作用域（即变量的作用域为最近的

{…}

）

for（设i=0；i<5；i++）{
setTimeout（函数（）{console.log（i）；}），i*100）；
}

如果您无法访问其中任何一个，则可以使用。这真的很难看，但它完成了任务

for (var i = 0; i < 5; i++){ 
    (function() {
        var newI = i;
        setTimeout(function(){ console.log(newI); }, i * 100); 
    })();
} 

（变量i=0；i<5；i++）的

（功能（）{
var-newI=i；
setTimeout（函数（）{console.log（newI）；}，i*100）；
})();
} 

您可以创建一个函数，该函数返回另一个修饰过的函数，其中包含一些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) {});                            
}

---

（我在我的项目中使用了一个类似的代码，它就像一个符咒）

我在这里遗漏了什么吗？您在for循环中，一次上载一个文件。这意味着在每个progressEvent中，您都已经引用了相应的文件。你能给progressEvent添加一个监听器并打印出它的“总”值吗？我想你已经在看相应的文件了。作为旁注，将配置从for循环中去掉，您不需要为每个文件重新定义它。是的，谢谢，我已经认为答案可能是没有答案；-）我只能在几天内尝试这一点-我会报告的…我也在想如何实现这一点。对于jQuery，我一直在使用“xhrFields”参数，但我不确定Axios是否有类似的功能。

for (var i = 0; i < 5; i++){ 
    (function() {
        var newI = i;
        setTimeout(function(){ console.log(newI); }, i * 100); 
    })();
} 

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) {});                            
}

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