React中Axios发送multipart/form-data数组数据为空问题求助

我尝试通过Axios发送包含图片的multipart/form-data格式数据，其中数组字段level提交后始终为空数组。当前使用Axios 1.6.5版本（该版本支持自动序列化），但不清楚问题所在。

我的React代码如下：

import AxiosInstance from "../Axios";
.....
AxiosInstance.post(`manager/`, {
  title: data.title,
  url: data.url,
  date: date,
  category: data.category,
  level: ["easy", "medium"], // 确认发送的是数组
  scope: data.scope,
  image: data.image,
  description: data.description,
}).then((res) => {
    console.log(res);
});

后端返回结果中level字段为空：

{
  "data": {
    "category": false,
    "created": "2024-01-27T17:58:38.028124Z",
    "date": "2024-01-31",
    "description": "Testing only",
    "id": 17,
    "image": "http://127.0.0.1:8000/images/manager/Testing.jpg",
    "level": [],
    "scope": true,
    "slug": "test",
    "title": "test",
    "updated": "2024-01-27T17:58:38.028124Z",
    "url": "https://test.com"
  }
}

我已通过Postman测试相同数据，后端可正常接收，请问如何在Axios中正确实现，遗漏了什么配置？

问题出在Axios自动序列化multipart/form-data时，数组的处理格式和后端解析期望不匹配。Postman发送数组时会自动以level[]=easy&level[]=medium的格式传递，而Axios默认的自动序列化无法生成这种格式，导致后端无法识别数组内容。

方法1：手动构建FormData（推荐） #

直接创建FormData实例，逐个添加字段，数组元素需要用level[]作为键名逐个append：

import AxiosInstance from "../Axios";

const formData = new FormData();
// 添加普通字段
formData.append('title', data.title);
formData.append('url', data.url);
formData.append('date', date);
formData.append('category', data.category);
formData.append('scope', data.scope);
formData.append('image', data.image);
formData.append('description', data.description);

// 处理数组字段
["easy", "medium"].forEach(item => {
  formData.append('level[]', item);
});

AxiosInstance.post(`manager/`, formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then((res) => {
    console.log(res);
});

方法2：配置Axios的序列化规则 #

如果需要保留自动序列化的方式，可以修改Axios实例的配置，让它处理数组时添加[]后缀。以Axios 1.6.5为例，可以通过formSerializer配置：

// 在AxiosInstance的创建代码中添加配置
const AxiosInstance = axios.create({
  // ...其他配置
  formSerializer: {
    visitor: {
      array: (value, key, path, helpers) => {
        value.forEach(item => {
          helpers.add(key + '[]', item);
        });
      }
    }
  }
});

之后就可以继续使用原来的对象参数方式发送请求，Axios会自动将数组转为key[]的格式。

内容的提问来源于stack exchange，提问作者Dra-Code