React Axios：使用 FormData() 上传多张图片

Question

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

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

起初我是这样做的

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

这是我的图像 1 的状态：

它returns错误422"the given data was invalid"； "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 formData

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

结果表明 formData 已附加好。但不知何故我无法上传它，因为它是 "invalid data"

感谢您的帮助！

Answer 1

您正在将图像转换为 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);

并使用 header 将数据发送为 multipart/form-data

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

希望这有效。

Answer 2

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

React Axios：使用 FormData() 上传多张图片

React Axios: Upload Multiple Images using FormData()

multipartform-data

form-data

image-uploading

reactjs

axios