Não é possível usar o forEach with Filelist

133

Estou tentando fazer um loop através de um Filelist:

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

Como você pode ver, field.photo.filestem um Filelist:

Como fazer um loop corretamente field.photo.files?

javascript file

— alex
fonte

2

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

— Tolgahan Albayrak

Não é uma matriz? É este node.js?

— Connex1

@connexo: Não, field.photo.filesé um objeto com protótipo FileList; assim como HTMLCollection, ele não tem Array.prototypeem sua cadeia de protótipos.

— Amadan 01/12/16

for loopTrabalho simples :)

— Reza

265

A FileListnão é um Array, mas está em conformidade com seu contrato (possui lengthe índices numéricos), para que possamos "emprestar" Arraymétodos:

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

Como você obviamente está usando o ES6, também pode torná-lo adequado Array, usando o novo Array.frommétodo:

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

— Amadan
fonte

Estranho, eu entendi: Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…)com Array.from.

— alex

Bem, você tem certeza de que sua variável é field.photo.files? Eu não estava verificando que ...

— Amadan

@Amadan field.photo.filesé exatamente o que os console.logshows na minha pergunta.

— alex

@ Dammad Damn, foi um erro de digitação. Desculpe.

— alex

11

você também pode usar o operador de spread[...field.photo.files].map(file => {});

— Henrikh Kantuni 30/0318

33

Você também pode iterar com um simples para:

var files = field.photo.files;

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

— Willian Ribeiro
fonte

11

No ES6, você pode usar:

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

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

— cara
fonte

3

A biblioteca lodash possui um método _forEach que percorre todas as entidades da coleção, como matrizes e objetos, incluindo o FileList:

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

— Mohoch
fonte

0

O código a seguir está em Texto Dactilografado

     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
fonte

-2

Se você estiver usando o Typecript, poderá fazer algo assim: Para uma variável 'files' com o tipo FileList [] ou File [], use:

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

— Victor Hugo Arango A.
fonte