Django中Ajax上传图片异常：视图request.FILES获取文件返回None

问题分析 #

前端能正常获取文件，但后端request.FILES.get('file')返回None，核心问题集中在前端重复绑定事件导致请求异常、后端视图缺少校验逻辑两方面，以下是针对性解决方案：

1. 修复前端重复绑定点击事件的问题 #

原代码每次打开modal时都会给添加按钮绑定一次点击事件，多次操作后会触发重复请求，导致数据异常。改用事件委托避免重复绑定：

// 全局委托点击事件，匹配所有以addExplanationImage开头的按钮
$(document).on('click', '[id^="addExplanationImage"]', function(e) {
    // 从按钮ID中提取questionId
    const questionId = this.id.replace('addExplanationImage', '');
    const fileInput = document.getElementById(`explanationPicFile${questionId}`);
    
    // 校验是否选择了文件
    if (!fileInput.files || fileInput.files.length === 0) {
        console.log('请先选择图片文件');
        return;
    }

    const file = fileInput.files[0];
    const formData = new FormData();
    formData.append('file', file);
    formData.append('csrfmiddlewaretoken', csrftoken);

    $.ajax({
        type: 'POST',
        url: `/administration/add_ajax_question_explanation_image/${questionId}`,
        data: formData,
        cache: false,
        processData: false, // 必须设置为false，避免jQuery处理FormData
        contentType: false, // 必须设置为false，让浏览器自动设置正确的Content-Type
        success: function(res) {
            console.log('上传成功:', res);
            // 上传完成后关闭modal并清空文件输入
            $(`#addExplanationImageModal${questionId}`).modal('hide');
            fileInput.value = '';
        },
        error: function(err) {
            console.error('上传失败:', err.responseText);
        }
    });
});

2. 完善后端视图的请求校验与错误处理 #

原视图缺少请求方法校验，且未处理文件为空的情况，修改如下：

from django.http import JsonResponse
from .models import Question, Explanation, ExplanationImage

def add_ajax_question_explanation_image(request, pk):
    # 校验请求类型：POST + Ajax
    if request.method != 'POST' or request.headers.get('x-requested-with') != 'XMLHttpRequest':
        return JsonResponse({'error': '非法请求'}, status=400)
    
    try:
        # 确保关联对象存在
        question = Question.objects.get(id=pk)
        explanation = Explanation.objects.get(question=question)
    except (Question.DoesNotExist, Explanation.DoesNotExist):
        return JsonResponse({'error': '关联对象不存在'}, status=404)
    
    # 获取上传文件
    file = request.FILES.get('file')
    if not file:
        return JsonResponse({'error': '未上传任何文件'}, status=400)
    
    # 保存图片
    image = ExplanationImage(image=file, explanation=explanation)
    image.save()
    
    # 返回JSON格式的成功响应
    return JsonResponse({
        'success': True,
        'image_id': image.id,
        'image_url': image.image.url
    })

3. 检查模型与Django配置 #

• 模型字段配置：确保ExplanationImage的image字段为ImageField并配置上传路径：

  class ExplanationImage(models.Model):
      explanation = models.ForeignKey(Explanation, on_delete=models.CASCADE)
      image = models.ImageField(upload_to='explanation_images/')  # 需确保MEDIA_ROOT下的此目录存在且有写入权限
  

• Django设置：确认MEDIA_ROOT和MEDIA_URL已正确配置，且服务器对MEDIA_ROOT目录有写入权限：

  # settings.py
  MEDIA_ROOT = BASE_DIR / 'media'
  MEDIA_URL = '/media/'
  

调试建议 #

1. 在浏览器开发者工具的Network标签中，查看POST请求的Form Data，确认文件是否被正确发送；
2. 在视图中临时添加打印语句，检查请求数据：

   print('POST数据:', request.POST)
   print('FILES数据:', request.FILES)
   

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