Angular通过FormData向Django REST API提交列表数据出现类型错误如何解决

• Django REST Framework对应的students字段为外键/多对多类型，期望接收整数格式的主键值数组，你当前代码通过JSON.stringify()将students数组序列化为了JSON字符串，不符合字段类型要求
• FormData传递数组不能直接赋值序列化后的字符串，需要遵循对应格式规范

修改Angular端数据组装逻辑，按FormData规范传递数组参数：

let noticeData = this.announceForm.value;
// 过滤'all'选项
if (noticeData.students.includes('all')){
    noticeData.students = noticeData.students.filter((s) => s != 'all')
}

const formData = new FormData();
// 追加普通字段
Object.keys(noticeData).forEach(key => {
  if (key !== 'students') {
    formData.append(key, noticeData[key]);
  }
})
// 单独追加students数组：同一key多次append，提前转整数格式
noticeData.students.forEach(studentId => {
  formData.append('students', parseInt(studentId).toString());
})

// 后续直接提交formData作为请求体即可

可选方案（JSON请求场景） #

如果后端支持接收application/json格式的请求体，也可以不用FormData，直接提交JSON数据：

let noticeData = this.announceForm.value;
if (noticeData.students.includes('all')){
    noticeData.students = noticeData.students.filter((s) => s != 'all')
}
// 数组内id统一转整数
noticeData.students = noticeData.students.map(id => parseInt(id));
// 直接提交noticeData作为请求体，请求头设置Content-Type为application/json

如果修改前端后仍报错，检查Django侧序列化器配置是否符合要求：

from rest_framework import serializers
from .models import Notice, Student

class NoticeSerializer(serializers.ModelSerializer):
    # 必须配置many=True，指定为多对多主键字段
    students = serializers.PrimaryKeyRelatedField(
        many=True,
        queryset=Student.objects.all()
    )
    class Meta:
        model = Notice
        fields = '__all__'

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