“FileList”类型上不存在 TypeScript 属性“forEach”

Posted 2023-05-08

【中文标题】“FileList”类型上不存在 TypeScript 属性“forEach”

【英文标题】：TypeScript Property 'forEach' does not exist on type 'FileList'

【发布时间】：2018-11-09 06:49:55

【问题描述】：

我允许用户上传多个文件。然后我需要遍历这些文件并执行一些操作。我想为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 类声明中进行……优先考虑经典继承而不是原型。

@Rob_M 不正确，您通常可以扩充现有声明。

【参考方案1】：

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

declare global 
    interface FileList 
        forEach(callback: (f: File) => void) : void;
    

FileList.prototype.forEach = function(callback)   ... ;

【参考方案2】：

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

【参考方案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]);
        
        
     

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

【参考方案4】：

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

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

【讨论】：

为什么你更喜欢这种表达方式而不是公认的答案——或者其他任何一个之前的答案？为什么未来的读者应该考虑使用它呢？它是否更适合特定场景？它是否使用提供一些好处的新语法？请解释一下。

嘘嘘嘘嘘

我没有关注。你能扩展你的答案吗？

你也许应该专注于你的重要问题，而不是在这里肆虐，但可以肯定。我有同样的问题，这里的解决方案不适合。所以我添加了我最终得到的解决方案。有多种解决方案可供选择总是好的。

我只是重读了我的评论，但我似乎并不生气。这当然不是故意的。我的目标是促使贡献者改进他们的答案，以便更好地帮助未来的读者。如果你觉得我的评论很粗鲁，请随意标记它。如果你认为审稿人不应该留下这样的反馈，我鼓励你在 Meta Stack Overflow 上提出这个问题。无论如何，我祝你一切顺利。我也希望您能花时间编辑您的答案以解决我的反馈；这会让它更有用，更有可能在这里建立你的声誉。