使用Django REST Framework上传含图片数据时无法获取POST数据

问题根源 #

• 前端手动指定Content-Type头，导致DRF的MultiPartParser无法正确解析FormData，引发编码异常
• 后端直接修改序列化器的initial_data不符合最佳实践，且需确认图片字段的序列化配置是否正确

前端修复方案 #

删除手动设置的Content-Type头，fetch发送FormData时会自动生成并配置正确的Content-Type（包含对应boundary）：

export const addProduct = async (product) => {
    const fd = new FormData();
    fd.append("name", product.name);
    fd.append("price", product.price);
    fd.append("quantity", product.quantity);
    fd.append("image_url", product.image_url);

    console.log(product.image_url) // 输出文件对象

    const response = await fetch(`${URL}/products`, {
        method: "POST",
        headers: {
            // 移除手动设置的Content-Type，由fetch自动处理
        },
        body: fd,
    })
    return response
}

后端优化方案 #

1. 避免直接修改serializer.initial_data，构造完整请求数据后传入序列化器
2. 仅保留MultiPartParser即可覆盖文件上传场景
3. 序列化器字段类型正确的情况下，无需手动转换价格、数量的类型

@parser_classes([MultiPartParser])
@api_view(['GET', 'POST'])
@permission_classes([IsAuthenticated])
def products(request):
    if request.method == 'POST':
        post_data = request.data.copy()
        post_data['user'] = request.user.pk

        serializer = ProductSerializer(data=post_data)
        
        if serializer.is_valid():
            serializer.save()
            return Response({'message': "product added"}, status=status.HTTP_201_CREATED)
        print(serializer.errors)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

序列化器配置示例 #

确保ProductSerializer中图片字段使用ImageField，并正确关联模型：

from rest_framework import serializers
from .models import Product

class ProductSerializer(serializers.ModelSerializer):
    class Meta:
        model = Product
        fields = ['id', 'name', 'price', 'quantity', 'image_url', 'user']
        read_only_fields = ['user']

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