Fetch提交带文件的Django Crispy表单时文件无法识别的问题排查

使用Fetch API提交包含文件和文本字段的Django Crispy表单，文本字段可正常提交，但文件字段在后端显示为空，导致表单验证失败，前端报JSON解析错误。

问题原因 #

• 表单初始化遗漏文件数据：后端创建表单实例时仅传入request.POST，未传入request.FILES，Django无法获取上传的文件。
• 错误分支处理不当：非POST请求分支中直接访问未定义的photoForm，导致后端返回500错误，前端无法解析HTML响应为JSON。
• 返回格式冗余：使用HttpResponse(JsonResponse(response_data))嵌套响应，不符合JSON返回规范。

解决方案 #

1. 修复后端视图函数 #

修改add_photo视图，传入文件数据并修正响应逻辑：

""" ajax add photo event to home wall """
from django.http import JsonResponse

def add_photo(request):
    response_data = {}
    if request.method == 'POST':
        # 同时传入POST和FILES数据
        photoForm = UploadPhotosForm(request.POST, request.FILES)
        if photoForm.is_valid():
            photoForm.save()
            response_data['result'] = 'success'
            return JsonResponse(response_data)
        else:
            # 返回表单错误信息，便于前端调试
            response_data['result'] = 'error'
            response_data['errors'] = photoForm.errors.as_json()
            return JsonResponse(response_data, status=400)
    else:
        response_data['result'] = 'error'
        response_data['message'] = '无效的请求方法'
        return JsonResponse(response_data, status=405)

2. 优化前端错误处理（可选） #

添加异常捕获，处理非JSON响应和服务器错误：

const photoForm = document.querySelector('#photo_form');

photoForm.addEventListener('submit', (event) => {
    event.preventDefault();
    const photoFormData = new FormData(photoForm);

    fetch("{% url 'add_photo' %}", {
        method: 'POST',
        body: photoFormData
        // FormData会自动设置正确的Content-Type，无需手动配置
    })
    .then((response) => {
        if (!response.ok) throw new Error('服务器响应异常');
        return response.json();
    })
    .then((data) => {
        if (data.result === 'success') {
            $('.modal-body').html('表单提交成功！');
            $('#modal-dialog').modal('show');
            photoForm.reset();
        } else {
            const errorContent = data.errors 
                ? `表单错误：${JSON.parse(data.errors).photo_file[0].message}` 
                : '表单提交失败';
            $('.modal-body').html(errorContent);
            $('#modal-dialog').modal('show');
        }
    })
    .catch((error) => {
        $('.modal-body').html('网络错误或服务器响应无效');
        $('#modal-dialog').modal('show');
        console.error(error);
    });
});

3. 确认表单类配置 #

确保表单类正确关联模型并包含文件字段：

from django import forms
from .models import Photos

class UploadPhotosForm(forms.ModelForm):
    class Meta:
        model = Photos
        fields = ['photo_title', 'photo_description', 'photo_date', 'photo_location', 'photo_file']

关键说明 #

• Django处理文件上传时，必须在表单初始化时传入request.FILES，否则无法读取文件数据。
• FormData对象会自动生成包含boundary的Content-Type头，无需手动设置contentType: false，避免覆盖自动配置。
• 后端返回错误时需设置对应HTTP状态码，前端通过response.ok判断请求状态，避免解析HTML为JSON导致的语法错误。

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