不能与文件列表一起使用forEach

133

我正在尝试通过Filelist：

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

如您所见field.photo.files有一个Filelist：

如何正确循环field.photo.files？

javascript file

— 亚历克斯
source

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的原型链中没有。

— 阿玛丹

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

— 阿玛丹
source

奇怪，我得到了：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.files正是console.log我的问题中所显示的内容。

— alex

@Amadan Damn，那是一个错字。抱歉。

— alex

11

您还可以使用点差运算符[...field.photo.files].map(file => {});

— Henrikh Kantuni 18-3-30

33

您也可以使用以下简单方法进行迭代：

var files = field.photo.files;

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

— 威廉·里贝罗
source

11

在ES6中，您可以使用：

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

参考：https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

— 花花公子
source

3

该lodash库有_forEach方法，通过收集所有实体，如数组和对象，其中包括文件清单循环：

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

— 莫霍奇
source

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

— 莎拉·香克达
source

-2

如果您使用的是Typescript，则可以执行以下操作：对于FileList []或File []类型的变量'files'，请使用：

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

— 维克多·雨果·阿兰戈A.
source