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

136

Я пытаюсь пройти через Filelist:

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

Как видите, field.photo.filesесть Filelist:

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

javascript file

— Алекс
источник

2

Array.prototype.forEach.call(field.photo.files, file => console.log(file));

— Толгахан Албайрак 01

Это не массив? Это node.js?

— Connexo 01

@connexo: Нет, field.photo.filesэто прототип объекта FileList; точно так же, как HTMLCollectionего нет Array.prototypeв цепочке прототипов.

— Амадан 01

Простая for loopработа :)

— Реза

266

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

— Amadan
источник

Странно, получаю вот что: Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…)с Array.from.

— Алекс

Вы уверены, что ваша переменная такая field.photo.files? Я не проверял это ...

— Амадан 01

@Amadan field.photo.files- это именно то, что console.logпоказывает мой вопрос.

— Алекс

@ Амадан Черт, это была опечатка. Сожалею.

— Алекс

11

вы также можете использовать оператор распространения[...field.photo.files].map(file => {});

— Генрих Кантуни

33

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

var files = field.photo.files;

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

— Виллиан Рибейро
источник

12

В ES6 вы можете использовать:

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

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

— чувак
источник

3

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

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

— Mohoch
источник

0

Следующий код находится в Typescript

     urls = new Array<string>();

     detectFiles(event) {
       const $image: any = document.querySelector('#file');
       Array.from($image.files).forEach((file: any) => {
       let reader = new FileReader();
       reader.onload = (e: any) => { this.urls.push(e.target.result); }
       reader.readAsDataURL(file);
      }
    }

— Шалаб Шанхдхар
источник

-2

Если вы используете Typescript, вы можете сделать что-то вроде этого: Для переменной 'files' с типом FileList [] или File [] используйте:

for(let file of files){
    console.log('line50 file', file);
  }

— Виктор Гюго Аранго А.
источник