Non è possibile utilizzare forEach con Filelist

135

Sto provando a scorrere un Filelist:

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

Come puoi vedere field.photo.filesha un Filelist:

Come eseguire correttamente il ciclo field.photo.files?

javascript file

— alex
fonte

2

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

— Tolgahan Albayrak

Non è un array? È questo node.js?

— collegamento

@connexo: No, field.photo.filesè un oggetto prototipato FileList; proprio come HTMLCollection, non ha Array.prototypenella sua catena di prototipi.

— Amadan

for loopLavoro semplice :)

— Reza

265

A FileListnon è an Array, ma è conforme al suo contratto (has lengthe indici numerici), quindi possiamo "prendere in prestito" Arraymetodi:

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

Dato che ovviamente stai usando ES6, potresti anche renderlo corretto Array, usando il nuovo Array.frommetodo:

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

— Amadan
fonte

Strano, ho capito: Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…)con Array.from.

— alex

Bene, sei sicuro che la tua variabile lo sia field.photo.files? Non stavo controllando che ...

— Amadan

@ Amadan field.photo.filesè esattamente ciò che console.logmostra nella mia domanda.

— alex

@Amadan Damn, è stato un errore di battitura. Scusate.

— alex

11

puoi anche utilizzare l'operatore di diffusione[...field.photo.files].map(file => {});

— Henrikh Kantuni

33

Puoi anche iterare con un semplice per:

var files = field.photo.files;

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

— Willian Ribeiro
fonte

12

In ES6 puoi usare:

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

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

— tipo
fonte

3

Il libreria lodash ha un metodo _forEach che esegue il ciclo attraverso tutte le entità di raccolta, come array e oggetti, incluso FileList:

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

— Mohoch
fonte

0

Il codice seguente è in 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
fonte

-2

Se stai usando Typescript puoi fare qualcosa del genere: Per una variabile 'files' con un tipo FileList [] o File [] usa:

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

— Victor Hugo Arango A.
fonte