React Axios：使用FormData（）上传多个图像

Question

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

基本上我想同时上传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记录formData

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

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

感谢您的帮助！

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);

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

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

希望这行得通。

Answer 2

添加标题{“ Content-type”：“ multipart / form-data”}