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

您会看到append实际上确实附加了文件。

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

2 个答案: