Không thể sử dụng forEach với Filelist

133

Tôi đang cố gắng lặp lại một Filelist:

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

Như bạn thấy field.photo.filescó Filelist:

Làm thế nào để lặp lại đúng cách field.photo.files?

javascript file

— alex
nguồn

2

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

— Tolgahan Albayrak

Nó không phải là một mảng? Đây có phải là node.js không?

— Connexo

@connexo: Không, field.photo.fileslà một đối tượng được tạo mẫu trên FileList; giống như HTMLCollection, nó không có Array.prototypetrong chuỗi nguyên mẫu của nó.

— Amadan

Đơn giản for loopCông việc :)

— Reza

265

A FileListkhông phải là an Array, nhưng nó tuân theo hợp đồng của nó (có lengthvà chỉ số số), vì vậy chúng ta có thể "mượn" Arraycác phương thức:

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

Vì rõ ràng là bạn đang sử dụng ES6, bạn cũng có thể biến nó thành Array bằng cách sử dụng Array.fromphương pháp mới :

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

— Amadan
nguồn

Thật kỳ lạ, tôi hiểu điều này: Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…)với Array.from.

— alex

Chà, bạn có chắc là biến của bạn field.photo.fileskhông? Tôi đã không kiểm tra điều đó ...

— Amadan

@Amadan field.photo.fileslà chính xác những gì console.loghiển thị trong câu hỏi của tôi.

— alex

@Amadan Chết tiệt, đó là lỗi đánh máy. Lấy làm tiếc.

— alex

11

bạn cũng có thể sử dụng toán tử spread[...field.photo.files].map(file => {});

— Henrikh Kantuni.

33

Bạn cũng có thể lặp lại với đơn giản cho:

var files = field.photo.files;

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

— Willian Ribeiro
nguồn

11

Trong ES6, bạn có thể sử dụng:

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

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destosystem_assignment

— anh bạn
nguồn

3

Các lodash thư viện có một _forEach phương pháp mà vòng qua tất cả các đơn vị thu gom, chẳng hạn như các mảng và các đối tượng, bao gồm cả FileList:

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

— Mohoch
nguồn

0

Đoạn mã sau nằm trong Typecript

     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
nguồn

-2

Nếu bạn đang sử dụng Typescript, bạn có thể làm như sau: Đối với biến 'tệp' có kiểu FileList [] hoặc File [], hãy sử dụng:

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

— Victor Hugo Arango A.
nguồn