Nie można użyć forEach z Filelist

136

Próbuję przejść przez Filelist:

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

Jak widać field.photo.filesma Filelist:

wprowadź opis obrazu tutaj

Jak prawidłowo przejść field.photo.files?

Alex
źródło
2
Array.prototype.forEach.call(field.photo.files, file => console.log(file));
Tolgahan Albayrak
To nie jest tablica? Czy to node.js?
connexo
@connexo: Nie, field.photo.filesjest prototypem obiektu FileList; tak jak HTMLCollectionnie ma Array.prototypew swoim łańcuchu prototypów.
Amadan
Prosta for looppraca :)
Reza

Odpowiedzi:

266

A FileListnie jest an Array, ale jest zgodny ze swoim kontraktem (ma lengthi indeksami numerycznymi), więc możemy „pożyczyć” Arraymetody:

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

Ponieważ oczywiście używasz ES6, możesz również sprawić, że będzie to poprawne Array, używając nowej Array.frommetody:

Array.from(field.photo.files).forEach(file => { ... });
Amadan
źródło
Dziwne, rozumiem to: Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…)z Array.from.
Alex
Czy na pewno twoja zmienna to field.photo.files? Nie sprawdzałem tego ...
Amadan,
@Amadan field.photo.filesjest dokładnie tym, co console.logpokazuje moje pytanie.
Alex
@Amadan Cholera, to była literówka. Przepraszam.
Alex
11
możesz również użyć operatora spreadu[...field.photo.files].map(file => {});
Henrikh Kantuni
33

Możesz również wykonać iterację za pomocą prostego for:

var files = field.photo.files;

for (var i = 0; i < files.length; i++) {
    console.log(files[i]);
}
Willian Ribeiro
źródło
3

Lodash biblioteka ma _forEach metodę pętli przez wszystkie podmioty zbiórki, takich jak tablice i obiekty, w tym FileList:

_.forEach(field.photo.files,(file => {
     // looping code
})
Mohoch
źródło
0

Poniższy kod jest w skrypcie 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
źródło
-2

Jeśli używasz Typescript, możesz zrobić coś takiego: Dla zmiennej „files” o typie FileList [] lub File [] użyj:

for(let file of files){
    console.log('line50 file', file);
  }
Victor Hugo Arango A.
źródło