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

Question

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

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

Answer 1

您需要在FileList接口上声明额外的功能，然后才能分配它。您可以使用声明合并来做到这一点。如果您使用的是模块系统，则需要在 global 中声明合并接口：

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

Answer 2

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 3

FileList 不要与数组混淆。该列表是一个具有其他属性的迭代器，例如 length 和 item.

一个可能的解决方案是使用 for-loop，我认为这是最好的方法。

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

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

Answer 4

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

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

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

TypeScript Property 'forEach' does not exist on type 'FileList'

typescript

filelist