Filelist ile her biri için kullanamazsınız


135

Bir döngüye girmeye çalışıyorum Filelist:

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

Gördüğünüz gibi field.photo.filesbir Filelist:

görüntü açıklamasını buraya girin

Nasıl düzgün döngü yapılır field.photo.files?


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

Dizi değil mi? Bu node.js mi?
connexo

@connexo: Hayır, field.photo.filesüzerinde prototiplenmiş bir nesnedir FileList; tıpkı prototip zincirinde HTMLCollectionolmadığı gibi Array.prototype.
Amadan

Basit for loopiş :)
Reza

Yanıtlar:


265

A FileList, bir değildir Array, ancak sözleşmesine uygundur ( lengthve sayısal endeksleri vardır), bu nedenle Arrayyöntemleri "ödünç alabiliriz" :

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

Açıkça ES6 Arraykullandığınız için, yeni Array.fromyöntemi kullanarak onu da uygun hale getirebilirsiniz :

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

Garip, bunu anlıyorum: Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…)ile Array.from.
alex

Peki, değişkeninizin olduğundan emin misiniz field.photo.files? Bunu kontrol etmiyordum ...
Amadan

@Amadan benim sorumda field.photo.filestam olarak ne console.loggösteriyor.
alex

@Amadan Lanet olsun, bir yazım hatasıydı. Afedersiniz.
alex

11
spread operatörünü de kullanabilirsiniz[...field.photo.files].map(file => {});
Henrikh Kantuni

33

Ayrıca aşağıdakiler için basit bir şekilde yineleme yapabilirsiniz:

var files = field.photo.files;

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


3

Lodash kütüphanesi olan _forEach yöntem böyle FileList içeren diziler ve nesneler gibi tüm toplama kişiler, döngüler:

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

0

Aşağıdaki kod Typescript içindedir

     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);
      }
    }

-2

Typecript kullanıyorsanız, aşağıdaki gibi bir şey yapabilirsiniz: FileList [] veya File [] türündeki bir değişken 'dosyalar' için şunu kullanın:

for(let file of files){
    console.log('line50 file', file);
  }
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.