ไม่สามารถใช้ forEach กับ Filelist

ฉันพยายามวนซ้ำFilelist:

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

อย่างที่คุณเห็นfield.photo.filesมีFilelist:

วิธีการวนซ้ำอย่างถูกต้องfield.photo.files?

A FileListไม่ใช่Arrayแต่เป็นไปตามสัญญา (มีlengthและดัชนีตัวเลข) ดังนั้นเราจึงสามารถ "ยืม" Arrayวิธีการ:

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

เนื่องจากคุณใช้ ES6 อย่างชัดเจนคุณสามารถทำให้เหมาะสมArrayได้โดยใช้Array.fromวิธีการใหม่:

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

คุณยังสามารถทำซ้ำได้ด้วยวิธีง่ายๆสำหรับ:

var files = field.photo.files;

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

ใน ES6 คุณสามารถใช้:

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

อ้างอิง: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

lodashห้องสมุดมี_forEachวิธีการที่ลูปผ่านทุกหน่วยงานคอลเลกชันเช่นอาร์เรย์และวัตถุรวมทั้ง FileList:

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

รหัสต่อไปนี้อยู่ใน 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);
      }
    }

หากคุณใช้ typescript คุณสามารถทำสิ่งนี้ได้: สำหรับตัวแปร "files" ที่มีประเภท FileList [] หรือ File [] ให้ใช้:

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