我允许用户上传多个文件。然后我需要遍历这些文件并执行一些操作。我想为FileList 添加一些额外的功能，但TS 不知道FileList 数组上的forEach。这是我的代码：
public uploadMultiple(evt){
console.log(evt.files);
FileList.prototype.forEach = function(callback) {[].forEach.call(this, callback)};
}
【问题讨论】：
.forEach 是原生 javascript Array.prototype 的属性。在 Typescript 中，如果你想为 FileList 类添加功能，你可以在 FileList 类声明中进行……优先考虑经典继承而不是原型。
标签： typescript filelist
您需要在FileList 接口上声明额外的函数，然后才能分配它。您可以使用声明合并来做到这一点。如果您使用的是模块系统，则需要在global 中声明合并的接口：
declare global {
interface FileList {
forEach(callback: (f: File) => void) : void;
}
}
FileList.prototype.forEach = function(callback) { ... };
【讨论】：
FileList 不能与数组混淆。该列表是具有其他属性的迭代器，例如 length 和 item。
一种可能的解决方案是使用 for 循环，我认为这是最好的方法。
for (let i = 0; i < files.length; ++i) {
const file = files[i];
...
}
【讨论】：
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]);
}
}
}
你可以试试这个对我有用。
【讨论】：
const target = event.target as HTMLInputElement;
(target.files as unknown as File[]).forEach((newFile) => {
// do something
});
我也可以推荐这个解决方案。这是一个简单的班轮。保持简单愚蠢。但请选择您喜欢的任何解决方案。
【讨论】：