不能将 forEach 与 Filelist 一起使用

Posted 2023-02-22

【中文标题】不能将 forEach 与 Filelist 一起使用

【英文标题】：Can't use forEach with Filelist

【发布时间】：2017-04-15 14:33:57

【问题描述】：

我正在尝试遍历Filelist：

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

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

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

【问题讨论】：

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

不是数组吗？这是 node.js 吗？

@connexo：不，field.photo.files 是在FileList 上原型化的对象；就像htmlCollection，它的原型链中没有Array.prototype。

简单的for loop工作:)

【参考方案1】：

FileList 不是Array，但它确实符合其约定（具有length 和数字索引），因此我们可以“借用”Array 方法：

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

由于您显然使用的是 ES6，您也可以使用新的 Array.from 方法将其设为正确的 Array：

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

【讨论】：

奇怪，我明白了：Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…) 和 Array.from。

好吧，你确定你的变量是field.photo.files吗？我没有检查...

@Amadan field.photo.files 正是console.log 在我的问题中显示的内容。

你也可以使用扩展运算符[...field.photo.files].map(file => );

@mcjlnrtwcz 除了易读性，我什么都想不出来。

【参考方案2】：

您也可以使用简单的 for 进行迭代：

var files = field.photo.files;

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

【参考方案3】：

在 ES6 中你可以使用：

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

参考：https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Operators/Destructuring_assignment

【参考方案4】：

lodash 库有一个 _forEach 方法循环遍历所有集合实体，例如数组和对象，包括 FileList：

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

【参考方案5】：

以下代码在 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);
   

【参考方案6】：

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

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