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 

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

Answer 3

 const config = {
            headers: { 'content-type': 'multipart/form-data' }
        }
        const formData = new FormData();
    
        Object.keys(payload).forEach(item => {
            formData.append([item], payload[item])
        })

将此 formData 传递给您的 API。 快乐编码！！！