手动上传多个文件到 Symfony 后端（无表单）答案

【问题标题】：Upload multiple files to Symfony Backend manually (without form)手动上传多个文件到 Symfony 后端（无表单）
【发布时间】：2021-02-28 00:21:10
【问题描述】：

我在尝试将多个文件从 ReactJS 应用程序发送到 Symfony 后端时遇到问题。

我上传了两个文件，但在我的 Symfony 后端中只有一个可见。

数据是从 ReactJS dropzone 发送的，我仔细检查了这两个文件是通过formData 发送的，我很好地使用了'content-type': 'multipart/form-data' 来发布数据。

在 Chrome Newtwork 选项卡中，表单数据详细信息显示两个文件已很好地附加到请求：

------WebKitFormBoundaryTif9sihCtI30UXXS Content-Disposition: form-data;名称=“文件”；文件名="冰川-583419_960_720.jpg" 内容类型：image/jpeg

------WebKitFormBoundaryTif9sihCtI30UXXS Content-Disposition: form-data;名称=“文件”； filename="image-ile.jpg" 内容类型：图片/JPEG

尽管如此，在我的 Symfony 后端文件参数包中只显示一个文件：

return $request->files;

序列化响应：

{
    "parameters": {
        "file": {
            "test": false,
            "original_name": "glacier-583419_960_720.jpg",
            "mime_type": "image/jpeg",
            "error": 0
        }
    },
    "file_keys": [
        "error",
        "name",
        "size",
        "tmp_name",
        "type"
    ]
}

如您所见，在“参数”中，只有一个文件而不是两个。

有人遇到过这个问题吗？我不知道可能是什么问题？

【问题讨论】：

标签： reactjs symfony symfony4

【解决方案1】：

我解决了我的问题，这是微不足道的，但它可以帮助其他人将来阅读。

根据发送的表单数据中的指示：

------WebKitFormBoundaryTif9sihCtI30UXXS Content-Disposition: form-data;名称=“文件”； filename="glacier-583419_960_720.jpg" 内容类型：image/jpeg

------WebKitFormBoundaryTif9sihCtI30UXXS Content-Disposition: form-data;名称=“文件”； filename="image-ile.jpg" 内容类型：image/jpeg

表单数据中添加的每个元素都具有相同的name 值。问题来了：

var tempFormData = new FormData();
setFormData(acceptedFiles.map((file)=>{
   tempFormData.append('file', file);
}));

更正的代码：

var tempFormData = new FormData();
setFormData(acceptedFiles.map((file)=>{
   tempFormData.append(file.name, file);
}));

所以错误不是来自 Symfony，而是来自前端应用程序没有很好地格式化发送的数据。

【讨论】：