Kann forEach nicht mit Dateiliste verwenden

132

Ich versuche, eine Filelist:

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

Wie Sie sehen können, field.photo.fileshat ein Filelist:

Wie richtig durchlaufen field.photo.files?

javascript file

— Alex
quelle

2

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

— Tolgahan Albayrak

Es ist kein Array? Ist das node.js?

— Connexo

@connexo: Nein, field.photo.filesist ein Objekt, auf dem ein Prototyp erstellt wurde FileList. genauso wie HTMLCollectiones nicht Array.prototypein seiner Prototypenkette hat.

— Amadan

Einfache for loopArbeit :)

— Reza

263

A FileListist kein Array, aber es entspricht seinem Vertrag (hat lengthund numerische Indizes), so dass wir ArrayMethoden "ausleihen" können:

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

Da Sie offensichtlich ES6 verwenden, können Sie es Arraymit der neuen Array.fromMethode auch richtig machen :

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

— Amadan
quelle

Seltsam, ich verstehe das: Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…)mit Array.from.

— Alex

Sind Sie sicher, dass Ihre Variable ist field.photo.files? Ich habe das nicht überprüft ...

— Amadan

@Amadan field.photo.filesist genau das, was die console.logShows in meiner Frage zeigen.

— Alex

@ Amadan Verdammt, es war ein Tippfehler. Es tut uns leid.

— Alex

11

Sie können auch den Spread-Operator verwenden[...field.photo.files].map(file => {});

— Henrikh Kantuni

33

Sie können auch mit einem einfachen für iterieren:

var files = field.photo.files;

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

— Willian Ribeiro
quelle

11

In ES6 können Sie Folgendes verwenden:

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

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

— Kumpel
quelle

3

Die lodash- Bibliothek verfügt über eine _forEach- Methode, die alle Auflistungsentitäten wie Arrays und Objekte einschließlich der FileList durchläuft:

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

— Mohoch
quelle

0

Der folgende Code ist 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
quelle

-2

Wenn Sie Typescript verwenden, können Sie Folgendes tun: Für eine Variable 'files' mit dem Typ FileList [] oder File [] verwenden Sie:

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

— Victor Hugo Arango A.
quelle