不能与文件列表一起使用forEach

Question

我正试图循环Filelist:

console.log('field:', field.photo.files)
field.photo.files.forEach(file => {
   // looping code
})

你可以看到field.photo.files有一个Filelist:

如何正确循环field.photo.files？

Answer 1

A FileList不是Array,但它确实符合其合约(有length和数字索引),所以我们可以"借" Array方法:

Array.prototype.forEach.call(field.photo.files, function(file) { ... });

既然您显然使用的是ES6,那么您也可以Array使用新Array.from方法使其成为正确的:

Array.from(field.photo.files).forEach(file => { ... });

Answer 2

在 ES6 中，您可以使用：

[...field.photo.files].forEach(file => console.log(file));

参考：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Answer 3

你也可以用一个简单的迭代:

var files = field.photo.files;

for (var i = 0; i < files.length; i++) {
    console.log(files[i]);
}

Answer 4

lodash库有一个_forEach方法，它循环遍历所有集合实体，例如数组和对象，包括 FileList：

_.forEach(field.photo.files,(file => {
     // looping code
})