Django函数视图下如何携带图片与JSON数据添加商品

先修正你的代码问题 #

你当前的视图直接通过request.data['photo']赋值给Product实例的方式是错误的，DRF处理文件上传需要依赖序列化器解析multipart/form-data类型的请求，直接实例化模型无法正确完成文件存储逻辑。

步骤1：完善Product序列化器 #

首先确保序列化器正确配置，支持文件字段的处理：

from rest_framework import serializers
from .models import Product

class ProductSerializer(serializers.ModelSerializer):
    class Meta:
        model = Product
        fields = ['id', 'pub_date', 'price', 'device_name', 'photo', 'user']

步骤2：修改函数视图逻辑 #

改用序列化器处理请求数据，同时完善错误处理逻辑：

from rest_framework.decorators import api_view, permission_classes
from rest_framework.permissions import AllowAny
from rest_framework.response import Response
from rest_framework import status
from .models import Product, Users
from .serializers import ProductSerializer

@api_view(['POST'])
@permission_classes([AllowAny])
def addproduct(request, pk):
    # 先校验目标用户是否存在
    try:
        user = Users.objects.get(id=pk)
    except Users.DoesNotExist:
        return Response({'error': '指定用户不存在'}, status=status.HTTP_404_NOT_FOUND)
    
    # 将用户ID加入请求数据（前端无需传递该字段）
    request_data = request.data.copy()
    request_data['user'] = pk
    
    # 用序列化器验证并保存数据
    serializer = ProductSerializer(data=request_data)
    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    # 返回验证错误详情
    return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

步骤3：前端发送请求的方式 #

必须使用multipart/form-data格式发送请求，不能用JSON格式。以下是两种常见实现方式：

浏览器端JavaScript

// 获取页面元素
const fileInput = document.getElementById('product-photo');
const priceInput = document.getElementById('product-price');
const nameInput = document.getElementById('product-name');
const userId = 1; // 替换为实际用户ID

// 构建FormData对象
const formData = new FormData();
formData.append('price', priceInput.value);
formData.append('device_name', nameInput.value);
formData.append('photo', fileInput.files[0]);

// 发送请求
fetch(`/api/addproduct/${userId}/`, {
    method: 'POST',
    body: formData
})
.then(res => res.json())
.then(data => console.log('商品添加成功:', data))
.catch(err => console.error('添加失败:', err));

Postman测试

1. 选择POST方法，输入接口URL（例如http://localhost:8000/api/addproduct/1/）
2. 切换到Body标签，选择form-data类型
3. 添加以下键值对：
   • price：输入商品价格（如99.99）
   • device_name：输入商品名称
   • photo：选择File类型，上传本地图片文件

步骤4：配置媒体文件（必做） #

确保Django能正确存储和访问上传的图片：
在项目settings.py中添加：

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

在项目根目录的urls.py中添加媒体文件路由：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你的其他路由配置
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

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