Невозможно использовать forEach с файловым списком

Я пытаюсь перебирать список Filelist:

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

Как вы видите, field.photo.files имеет список Filelist:

enter image description here

Как правильно выполнить цикл field.photo.files?

Ответы

Ответ 1

FileList не является Array, но он соответствует его контракту (имеет length и числовые индексы), поэтому мы можем "заимствовать" методы Array:

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

Поскольку вы, очевидно, используете ES6, вы также можете сделать его подходящим Array, используя новый метод Array.from:

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

Ответ 2

Вы также можете выполнить итерацию с помощью простого для:

var files = field.photo.files;

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

Ответ 3

Библиотека lodash имеет метод _forEach, который проходит по всем элементам коллекции, таким как массивы и объекты, включая FileList:

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