React Axios：使用 FormData() 上传多个图像答案

【问题标题】：React Axios: Upload Multiple Images using FormData()React Axios：使用 FormData() 上传多个图像
【发布时间】：2019-10-24 21:53:15
【问题描述】：

我正在尝试将文件上传到后端。但它失败了

基本上我想同时上传11张图片。

一开始我是这样做的

    const title, image1, image2, ... = this.state;
    axios.post(`myapi`, {title, image1, image2})

这是我的图像 1 的状态：

返回422“给定数据无效”的错误； "image_1"：图片字段为必填项。

在网上看了几遍，我发现上传和图片，你必须使用formData。所以我尝试这样做

const title = this.state.title;

const formData = new FormData();
formData.append('image_1', this.state.image_1);
formData.append('image_2', this.state.image_2);
...
axios.post(`myapi`, {title, formData})

我仍然遇到同样的 422 错误，

试图 console.log 表单数据

for (var fd of formData) {
  console.log(fd);
}

结果表明 formData 已被很好地附加。但不知何故我无法上传它，因为它是“无效数据”

感谢您的帮助！

【问题讨论】：

researchhubs.com/post/computing/javascript/…希望对你有帮助
@HardikChaudhary 感谢您的回复！我尝试在追加中添加文件名，但它仍然不起作用。

标签： reactjs axios multipartform-data image-uploading form-data

【解决方案1】：

添加标题 {"Content-type": "multipart/form-data"}

【讨论】：

【解决方案2】：

您正在将图像转换为 FormData，但将它们作为 JSON 发送。您也应该在 formData 中包含标题。

const formData = new FormData();
formData.append('title', this.state.title);
formData.append('image_1', this.state.image_1);
formData.append('image_2', this.state.image_2);

并发送标头为multipart/form-data的数据

axios.post(`https://api.cashless.vip/api/homepage`, formData, {headers: {"Content-type": "multipart/form-data"}});

希望这行得通。

【讨论】：