axios配合Django DRF使用multipart/form-data时如何传递数组参数

你当前写法无法传递数组的核心原因是：FormData的append()方法传入数组类型值时，会自动调用toString()方法将数组转为逗号拼接的字符串（比如[2,3,1]会变成"2,3,1"），Django DRF默认不会将这种字符串解析为数组类型，因此无法正确接收参数。

针对数组类型字段，需要遍历数组的每个元素，以字段名[]的格式逐个追加到FormData中，Django DRF原生支持这种命名规则，会自动将同个字段名[]的多个值聚合为数组。

修改后的完整代码 #

const url = "api/store/";
const auth = {
  headers: {
    "Content-Type": false,
  },
};
const formData = new FormData();
for (const key in data) {
  if (key === "photo") {
    if (data[key][0] !== undefined) {
      formData.append(key, data[key][0]);
    }
  } else if (Array.isArray(data[key])) {
    // 处理数组类型字段
    data[key].forEach(item => {
      formData.append(`${key}[]`, item);
    })
  } else {
    formData.append(key, data[key]);
  }
}
const promise = axiosInstance.post(url, formData, auth);
return promise;

请确认Django DRF对应接口的Serializer中，services字段配置为支持数组的类型，示例如下：

from rest_framework import serializers

class StoreSerializer(serializers.Serializer):
    # 其余字段省略
    services = serializers.ListField(child=serializers.IntegerField())
    # 如果services是关联表主键，也可使用如下写法
    # services = serializers.PrimaryKeyRelatedField(many=True, queryset=Service.objects.all())

内容的提问来源于stack exchange，提问作者Santhosh