formData.append（）是不是将文件发送到服务器？

Question

我正在写一些React.js，一次上传多张照片。我目前正在尝试将一批照片发送到服务器，但我似乎无法将文件附加到formData。

我在输入字段的onChange事件上调用此函数：

batchUpload(e) {
    e.preventDefault();

    let files = e.target.files;

    for (let i = 0; i < files.length; i++) {
        let file = files[i],
            reader = new FileReader();
        reader.onload = (e) => {
            let images = this.state.images.slice();

            if (file.type.match('image')) {
                images.push({file, previewURL: e.target.result});
                this.formData.append('files', file); //THIS IS NOT APPENDING THE FILE CORRECTLY
                this.setState({images});
            }
        };
        reader.readAsDataURL(file);
    }

    this.props.setFormWasEdited(true);
}

然后按下保存按钮后我运行此功能：

saveClick(goBack, peopleIdArray) {
    if (this.state.images.length > 0) {

        let formData = this.formData;
        formData.append('token',  Tokens.findOne().token);
        formData.append('action', 'insertPhotoBatch');
        formData.append('tags', peopleIdArray);
        formData.append('date', dateString());

        for (var pair of formData.entries()) {
            console.log(pair[0] + ', ' + JSON.stringify(pair[1]));
        }

        let xhr = new XMLHttpRequest();

        xhr.open('POST', Meteor.settings.public.api, true);
        xhr.onload = (e) => {
            if (xhr.status === 200) {
                // upload success
                console.log('XHR success');
            } else {
                console.log('An error occurred!');
            }
        };
        xhr.send(formData);

    } else {
        //signifies error
        return true;
    }
}

在将文件附加到formData之前，一切似乎都没问题。我究竟做错了什么？任何帮助将非常感激！谢谢！

Answer 1

如果我没有弄错你问题是this.formData.append('files', file);在for循环中运行这一行会得到1个字段，所有文件相互附加导致文件无效。

相反，您必须将文件“array”语法用于通知，如下所示：

this.formData.append('files[]', file);

通过这种方式，您可以将服务器端的文件作为$_FILES['files']['name'][0]，$_FILES['files']['name'][1]，...以及与文件数组的其他属性一样明智。

Answer 2

我希望你已经解决了你的问题。我仍然不明白为什么我的formData似乎没有给我的服务器带来任何东西，但我确实发现你的代码存在问题。

当你使用

JSON.stringify(pair[1])

结果看起来像一个空数组。如果你改为尝试

pair[1].name 

你会看到附加实际上附加了你的文件。