从文件上传中删除大文件答案

【问题标题】：Removing large files from file upload从文件上传中删除大文件
【发布时间】：2017-05-27 04:17:32
【问题描述】：

我希望允许用户通过 Ajax 上传多个文件。如果某些文件太大，我想将它们从上传列表中删除。我该怎么做呢？我的输入字段目前有以下内容。

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

到目前为止，我已经想出了类似的方法来验证哪些文件太大：

handleChange(event) {
    const target = event.target;

    if (target.type === 'file'){
        console.log("FILES")
        const files = target.files
        console.log("The following files are too large")
        for (let i=0; i < files.length; i++){
            if (files[i].size > 50000){
                console.log(files[i].name)
            }
        }
    }
}

我对文件的处理方式感到困惑，因为它们并不是文件系统上实际文件的真正链接。文件结构如何工作？如何将好的文件存储到可使用 Ajax 上传的新文件结构中？

【问题讨论】：

标签： javascript ajax file reactjs

【解决方案1】：

target.files 只是一个数组。你可以简单地过滤它，删除你不想要的文件，然后对新数组做任何你想做的事情（例如，将它存储在组件的状态中）。

const files = target.files.filter(file => file.size <= 50000);
this.setState({files});
// or uploadFiles(files)

如果您询问如何通过 XMLHTTPRequest 实际发送文件，可以使用FormData：

const data = new FormData();
files.forEach(file => data.append(file.name, file));

然后通过 XMLHTTPRequest 发送FormData 对象。

【讨论】：