No se puede usar forEach con Filelist

135

Estoy tratando de recorrer un Filelist:

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

Como puede ver field.photo.filestiene un Filelist:

¿Cómo recorrer correctamente field.photo.files?

javascript file

— alex
fuente

2

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

— Tolgahan Albayrak

¿No es una matriz? ¿Es este node.js?

— Connexo

@connexo: No, field.photo.fileses un objeto prototipo FileList; al igual HTMLCollectionque, no tiene Array.prototypeen su cadena de prototipos.

— Amadan

for loopTrabajo simple :)

— Reza

265

A FileListno es un Array, pero se ajusta a su contrato (tiene lengthíndices numéricos), por lo que podemos "tomar prestados" Arraymétodos:

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

Dado que obviamente está usando ES6, también podría hacerlo adecuado Array, usando el nuevo Array.frommétodo:

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

— Amadan
fuente

Extraño, entiendo esto: Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…)con Array.from.

— alex

Bueno, ¿estás seguro de que tu variable lo es field.photo.files? No estaba comprobando eso ...

— Amadan

@Amadan field.photo.fileses exactamente lo que console.logmuestra en mi pregunta.

— alex

@Amadan Maldita sea, fue un error tipográfico. Lo siento.

— alex

11

también puede utilizar el operador de propagación[...field.photo.files].map(file => {});

— Henrikh Kantuni

33

También puede iterar con un simple para:

var files = field.photo.files;

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

— Willian Ribeiro
fuente

12

En ES6 puede utilizar:

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

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

— tipo
fuente

3

La biblioteca lodash tiene un método _forEach que recorre todas las entidades de la colección, como matrices y objetos, incluido FileList:

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

— Mohoch
fuente

0

El siguiente código está en 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);
      }
    }

— Shalabh Shankhdhar
fuente

-2

Si está usando TypeScript, puede hacer algo como esto: Para una variable 'archivos' con un tipo FileList [] o File [] use:

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

— Víctor Hugo Arango A.
fuente