Django Rest Framework无图片上传选项且创建接口返回405错误求助

1. 接口GET 405报错&DRF界面无上传选项修复 #

修改views.py代码：

• 你当前视图仅允许POST请求，浏览器直接访问接口默认发起GET请求所以报405，需要给api_view装饰器添加GET支持
• DRF处理文件上传需要配置对应解析器，否则不会渲染文件上传表单

修改后的views.py代码：

from rest_framework.parsers import MultiPartParser, FormParser
from rest_framework.decorators import api_view, parser_classes

@api_view(['GET', 'POST'])
@parser_classes([MultiPartParser, FormParser])
def create_person(request):
    if request.method == 'POST':
        serializer = PersonSerializer(data=request.data)
        if serializer.is_valid(raise_exception=True):
            serializer.save()
        return Response(serializer.data)
    # GET请求返回空结构供DRF界面渲染表单
    return Response()

修改后重新访问接口地址，就能看到包含图片上传选项的交互表单。

2. 前端上传功能修复 #

你当前前端代码存在两个核心错误：

• 二进制文件无法通过JSON格式传输，必须使用FormData格式提交
• 文件输入框不能取value属性，要取files属性获取选中的文件对象

修改handleChange逻辑 #

let handleChange = (e) => {
    if (e.target.id === 'image') {
        // 处理文件上传字段，取选中的第一个文件
        setPerson({...person, [e.target.id]: e.target.files[0]});
    } else {
        // 普通文本字段正常取value
        setPerson({...person, [e.target.id]: e.target.value});
    }
}

修改createPerson提交逻辑 #

let createPerson = async (e) => {
    e.preventDefault()
    // 构建FormData对象
    const formData = new FormData();
    formData.append('name', person.name);
    formData.append('about', person.about);
    formData.append('email', person.email);
    formData.append('image', person.image);

    fetch(`/api/person-create/`, {
        method: "POST",
        // 不要手动设置content-type，浏览器会自动生成带boundary的multipart/form-data类型
        body: formData
    })
    .then(() => {
        setPerson({
            name:"",
            about:"",
            email:"",
            image:"",
        })
    })
}

修改文件输入框代码 #

文件输入框不需要绑定value属性，直接删除该属性即可：

<input onChange={handleChange} type="file" className="custom-file-input" id="image" />

3. 基础配置检查 #

确认项目settings.py已配置媒体文件参数：

MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = '/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，提问作者naveed