Impossible d'utiliser forEach avec Filelist

135

J'essaye de parcourir un Filelist:

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

Comme vous pouvez le voir field.photo.filesa un Filelist:

Comment faire une boucle correctement field.photo.files?

javascript file

— Alex
source

2

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

— Tolgahan Albayrak

Ce n'est pas un tableau? Est-ce node.js?

— connexo

@connexo: Non, field.photo.filesest un objet prototypé sur FileList; tout comme HTMLCollection, il n'a pas Array.prototypedans sa chaîne de prototypes.

— Amadan

for loopTravail simple :)

— Reza

265

A FileListn'est pas un Array, mais il est conforme à son contrat (a lengthet indices numériques), nous pouvons donc "emprunter" des Arrayméthodes:

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

Puisque vous utilisez évidemment ES6, vous pouvez également en faire un bon Array, en utilisant la nouvelle Array.fromméthode:

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

— Amadan
source

Étrange, je comprends ceci: Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…)avec Array.from.

— alex

Eh bien, êtes-vous sûr que votre variable est field.photo.files? Je ne vérifiais pas ça ...

— Amadan

@Amadan field.photo.filesest exactement ce que console.logmontre ma question.

— alex

@Amadan Damn, c'était une faute de frappe. Désolé.

— alex

11

vous pouvez également utiliser l'opérateur de propagation[...field.photo.files].map(file => {});

— Henrikh Kantuni

33

Vous pouvez également itérer avec un simple pour:

var files = field.photo.files;

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

— Willian Ribeiro
source

12

Dans ES6, vous pouvez utiliser:

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

Référence: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

— mec
source

3

La bibliothèque lodash a une méthode _forEach qui parcourt toutes les entités de collection, telles que les tableaux et les objets, y compris FileList:

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

— Mohoch
source

0

Le code suivant est en typographie

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

— Shalabh Shankhdhar
source

-2

Si vous utilisez Typescript, vous pouvez faire quelque chose comme ceci: Pour une variable «fichiers» avec un type FileList [] ou File [], utilisez:

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

— Victor Hugo Arango A.
source