使用 React JS 上传多个文件答案

【问题标题】：Multiple File Upload with React JS使用 React JS 上传多个文件
【发布时间】：2017-10-22 18:07:05
【问题描述】：

我试图弄清楚如何在 React JS 中循环上传多个文件。

最终，我希望能够循环浏览每个文件，以便判断是否只有 PNG、JPG 和 MP3 文件正在上传。我还希望 PNG/JPG 文件限制为 5MB，MP3 文件限制为 2MB。

到目前为止，我无法弄清楚为什么我可以访问一个文件而不是一组文件。

<input id="file" type="file" onChange={this.handleChange.bind(this)} required multiple />

我的 handleChange 函数看起来像这样：

handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;

     this.setState({
         [id]: value
     });

    console.log(id)
    console.log(value)
}

当我选择多个文件时，我只会显示一个。例如，上面的两条控制台行产生以下内容：

file
C:\fakepath\My Secret Document.docx

为什么value 中只存储一个值？如何正确遍历每个文件以检查其大小和类型？我对使用 JQuery 不感兴趣。

【问题讨论】：

你要查的是event.target.files

标签： javascript reactjs

【解决方案1】：

文件包含在 FileList 中，在 event.target.files 内，您可以使用 Array.from(event.target.files) 并得到一个包含所有选定文件的数组。

更多关于FileList的信息

【讨论】：