类型'FileList'上不存在 TypeScript 属性'forEach'

Question

我允许用户上传多个文件。然后我需要遍历这些文件并执行一些操作。我想为FileList添加一些额外的功能，但 TS 不知道FileList阵列上的forEach。这是我的代码：

public uploadMultiple(evt){
console.log(evt.files);
FileList.prototype.forEach = function(callback) {[].forEach.call(this, callback)};
}

Answer 1

FileList

不要与数组混淆。该列表是具有其他属性(如length和item(的迭代器。

一个可能的解决方案是使用 for 循环，在我看来这是最好的方法。

for (let i = 0; i < files.length; ++i) {
const file = files[i];
...
}

https://developer.mozilla.org/en-US/docs/Web/API/FileList

Answer 2

您需要在FileList接口上声明额外的函数，然后才能分配它。您可以使用声明合并来执行此操作。如果您使用的是模块系统，则需要在global中声明合并的接口：

declare global {
interface FileList {
forEach(callback: (f: File) => void) : void;
}
}
FileList.prototype.forEach = function(callback) {  ... };

Answer 3

imagList: Array<any> = [];
uploadMultiple(event) {
let reader = new FileReader();
this.imagList.pop();
if (event.target.files && event.target.files.length > 0) {
for (var i = 0; i < event.target.files.length; i++) {
this.imagList[i] = event.target.files[i];
}
var formData = new FormData();
for (var i = 0; i < this.imagList.length; i++) {
formData.append("File", <string>this.imagList[i]);
}
}
} 

你可以试试这个，它对我有用。

Answer 4

const target = event.target as HTMLInputElement;
(target.files as unknown as File[]).forEach((newFile) => {
// do something
});

我也可以推荐这个解决方案。这是一个简单的衬里。保持简单愚蠢。但是选择您喜欢的任何解决方案。