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


136

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

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

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

введите описание изображения здесь

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


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

Странно, получаю вот что: 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]);
}


3

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

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

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);
  }
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.