如何通过JavaScript FormData提交Django嵌套序列化器数据？

问题原因 #

你用JSON.stringify把receivers数组转成字符串后通过FormData提交，Django REST Framework（DRF）默认不会自动将这个字符串解析为数组对象，因此序列化器无法识别receivers字段，返回必填错误。

下面提供两种可行的解决方法：

方案一：前端调整FormData的字段格式 #

直接遍历receivers数组，将每个对象的字段以带索引的嵌套格式添加到FormData中，DRF的嵌套序列化器可以自动识别这种格式。

示例代码：

const formData = new FormData();

// 添加其他非嵌套字段
formData.append('title', this.title);
formData.append('text', this.text);
// ... 其他字段同理

// 处理receivers数组
this.receivers.forEach((receiver, index) => {
  Object.keys(receiver).forEach(key => {
    const value = receiver[key];
    // 跳过null/undefined值，避免不必要的字段提交
    if (value !== null && value !== undefined) {
      formData.append(`receivers[${index}][${key}]`, value);
    }
  });
});

方案二：后端序列化器手动解析JSON字符串 #

如果无法修改前端代码，可以在序列化器中添加逻辑，手动将FormData中传过来的receivers字符串解析为数组对象。

修改后的序列化器代码：

import json
from rest_framework import serializers
# 导入你的模型和SerializerFunctions

class LetterReceiverSerializer(serializers.ModelSerializer):
    id = serializers.IntegerField(allow_null=True, default=None, read_only=True)

    class Meta:
        model = LetterReceiverModel
        fields = '__all__'
        read_only_fields = ['letter']


class LetterDetailsSerializer(serializers.ModelSerializer):
    receivers = LetterReceiverSerializer(many=True)

    class Meta:
        model = LetterModel
        fields = '__all__'

    def to_internal_value(self, data):
        # 检查并解析receivers的JSON字符串
        if isinstance(data, dict) and 'receivers' in data:
            receivers_data = data['receivers']
            if isinstance(receivers_data, str):
                try:
                    data['receivers'] = json.loads(receivers_data)
                except json.JSONDecodeError:
                    # 解析失败时保持原数据，让序列化器抛出格式错误
                    pass
        return super().to_internal_value(data)

    def create(self, validated_data):
        return SerializerFunctions.create(validated_data, LetterModel, 'receivers')

    def update(self, instance, validated_data):
        return SerializerFunctions.update(validated_data, instance, 'receivers')

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