Question

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

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，而不是使用forEach。

for (var index = 0; index < files.length; ++index) {
    var file = files.item(index);
}

有关更多信息，请访问：

文件列表： https://developer.mozilla.org/en-US/docs/Web/API/FileList
文件：https://developer.mozilla.org/en-US/docs/Web/API/File

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

3 个答案: