forEach를 Filelist와 함께 사용할 수 없습니다.


133

나는 루프를 통해 시도하고있다 Filelist:

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

당신이 볼 수 있듯이 것은 field.photo.files있습니다 Filelist:

여기에 이미지 설명 입력

제대로 반복하는 방법 field.photo.files?


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

배열이 아닙니까? 이 node.js입니까?
connexo

@connexo : 아니요,에서 field.photo.files프로토 타입 된 개체입니다 FileList. 와 마찬가지로 프로토 타입 체인 HTMLCollection에는 없습니다 Array.prototype.
Amadan

간단한 for loop작업 :)
Reza

답변:


265

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 => { ... });

이상한,이 얻을 : Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…)Array.from.
alex

글쎄, 당신의 변수가 확실 field.photo.files합니까? 나는 ... 그 확인되지 않았다
Amadan

@Amadan field.photo.filesconsole.log내 질문에서 정확히 보여주는 것입니다.
alex

@Amadan 젠장, 오타였습니다. 죄송합니다.
alex

11
당신은 또한 확산 연산자 사용할 수 있습니다[...field.photo.files].map(file => {});
Henrikh Kantuni

33

다음과 같은 간단한 방법으로 반복 할 수도 있습니다.

var files = field.photo.files;

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


3

lodash의 라이브러리는이 _forEach의 방법을 그 같은 파일 목록을 포함하여 배열과 객체, 모든 수집 기관을 통해 루프 :

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

0

다음 코드는 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);
      }
    }

-2

Typescript를 사용하는 경우 다음과 같이 할 수 있습니다. FileList [] 또는 File [] 유형의 변수 'files'에 대해 다음을 사용하십시오.

for(let file of files){
    console.log('line50 file', file);
  }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.