React中向FormData追加对象数组遇400错误求助

首先解决最可能的核心问题：你手动设置了content-type: multipart/form-data，但axios在发送FormData时会自动生成包含正确boundary的Content-Type头，手动设置会丢失boundary，导致后端无法解析表单数据，这是400错误的常见诱因。

第一步：移除手动设置的Content-Type头 #

修改你的请求配置，删掉手动添加的content-type：

const config = {
    headers: {
        // 移除这一行：'content-type': 'multipart/form-data',
        'Authorization': localStorage.getItem('access_token') ?
        'Bearer ' + localStorage.getItem('access_token') :
        null,
    },
};

第二步：根据后端接收方式调整数组传递 #

你已经在Postman验证过后端能处理，所以要对齐Postman的请求方式：

场景1：Postman中多次添加ingredients字段传递单个元素

如果Postman是通过重复添加ingredients（或ingredients[]）键，每次传入单个元素的JSON字符串，那么前端循环append每个元素：

data.ingredients.forEach(element => {
    formData.append('ingredients', JSON.stringify(element));
});

后端需要通过getlist获取所有值并解析：

import json
from rest_framework.response import Response
from rest_framework.views import APIView

class RecipeCreateView(APIView):
    def post(self, request):
        # 获取所有ingredients参数的值
        ingredients_str_list = request.data.getlist('ingredients')
        # 解析每个JSON字符串为字典
        ingredients = [json.loads(item) for item in ingredients_str_list]
        # 结合其他字段处理逻辑...
        return Response(status=201)

对应的Serializer可以用ListField嵌套子序列化器：

from rest_framework import serializers

class IngredientSerializer(serializers.Serializer):
    name = serializers.CharField()
    quantity = serializers.CharField()
    # 你的其他配料字段

class RecipeSerializer(serializers.Serializer):
    recipe_name = serializers.CharField()
    photo = serializers.ImageField(required=False)
    ingredients = IngredientSerializer(many=True)

场景2：Postman中传递整个数组的JSON字符串

如果Postman是把整个ingredients数组序列化为JSON字符串，放在单个ingredients字段里，那么前端只需：

formData.append('ingredients', JSON.stringify(data.ingredients));

后端模型和Serializer使用JSONField即可直接接收：

# models.py
from django.db import models

class Recipe(models.Model):
    recipe_name = models.CharField(max_length=255)
    photo = models.ImageField(upload_to='recipes/', blank=True)
    ingredients = models.JSONField()

# serializer.py
from rest_framework import serializers
from .models import Recipe

class RecipeSerializer(serializers.ModelSerializer):
    class Meta:
        model = Recipe
        fields = ['id', 'recipe_name', 'photo', 'ingredients']

调试建议 #

• 用浏览器开发者工具查看Network请求，对比Postman的请求头和FormData结构，确保两者完全一致
• 在Django后端打印request.data和request.headers，确认实际接收到的数据是否符合预期

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