Tidak dapat menggunakan forEach dengan Filelist

135

Saya mencoba mengulang melalui Filelist:

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

Seperti yang Anda lihat field.photo.filesmemiliki Filelist:

Bagaimana cara mengulang dengan benar field.photo.files?

javascript file

— alex
sumber

2

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

— Tolgahan Albayrak

Ini bukan array? Apakah node.js ini?

— connexo

@connexo: Tidak, field.photo.filesadalah objek yang di-prototipe FileList; sama seperti HTMLCollection, tidak ada Array.prototypedalam rantai prototipe-nya.

— Amadan

for loopPekerjaan sederhana :)

— Reza

265

A FileListbukan an Array, tetapi sesuai dengan kontraknya (memiliki lengthdan indeks numerik), jadi kita dapat "meminjam" Arraymetode:

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

Karena Anda jelas menggunakan ES6, Anda juga bisa membuatnya sesuai Array, menggunakan Array.frommetode baru :

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

— Amadan
sumber

Aneh, saya mengerti ini: Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…)dengan Array.from.

— alex

Nah, apakah Anda yakin variabel Anda field.photo.files? Saya tidak memeriksa itu ...

— Amadan

@Amadan field.photo.filespersis seperti yang console.logditunjukkan dalam pertanyaan saya.

— alex

@Amadan Sial, salah ketik. Maaf.

— alex

11

Anda juga dapat menggunakan operator penyebaran[...field.photo.files].map(file => {});

— Henrikh Kantuni

33

Anda juga dapat mengulang dengan sederhana untuk:

var files = field.photo.files;

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

— Willian Ribeiro
sumber

12

Di ES6 Anda dapat menggunakan:

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

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

— bung
sumber

3

The lodash perpustakaan memiliki _forEach metode yang loop melalui semua entitas koleksi, seperti array dan objek, termasuk FileList:

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

— Mohoch
sumber

0

Kode berikut ada di Skrip Ketik

     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
sumber

-2

Jika Anda menggunakan Ketik Anda dapat melakukan sesuatu seperti ini: Untuk 'file' variabel dengan tipe FileList [] atau File [] gunakan:

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

— Victor Hugo Arango A.
sumber