使用Ajax向Django上传图片时cleaned_data为空求助

我来帮你一步步排查并解决这个问题：

1. 核心问题：未定义包含图片字段的自定义Form类 #

你当前使用的forms.Form是Django的基础空表单类，它默认没有任何字段，所以不管你上传什么数据，表单验证都会失败，cleaned_data自然是空的。

首先需要定义一个带图片字段的自定义表单：

from django import forms

class ImageUploadForm(forms.Form):
    image = forms.ImageField()

然后在你的视图里替换原有的forms.Form，使用这个自定义表单：

myform = ImageUploadForm(request.POST, request.FILES)

2. 必须添加CSRF令牌验证 #

Django默认启用CSRF保护，你的Ajax POST请求如果不带CSRF令牌，会被服务器判定为非法请求，间接导致表单验证失败。这里提供两种添加方式：

方式一：通过请求头传递令牌 #

先写一个获取CSRF令牌的辅助函数，再在Ajax请求中添加请求头：

// 从浏览器Cookie中获取CSRF令牌
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function sendImage() {
    console.log(blob);
    var fd = new FormData();
    fd.append('image', blob);
    const csrftoken = getCookie('csrftoken');
    
    var tet = $.ajax({
        url: '/login/photoverify/',
        type: 'POST',
        data: fd,
        async: false,
        contentType: false,
        processData: false,
        // 添加CSRF请求头
        headers: {
            'X-CSRFToken': csrftoken
        },
        success: function (response) {
            console.log(response.driverBeacon);
            document.getElementById('username').setAttribute('value', response.username);
        },
        error: function (error) {
            console.log(error);
        }
    }).responseText;
}

方式二：将令牌加入FormData #

如果你的页面是Django模板渲染的，可以直接通过{% csrf_token %}生成的隐藏输入框获取令牌，再加入FormData：

function sendImage() {
    console.log(blob);
    var fd = new FormData();
    fd.append('image', blob);
    // 从页面隐藏输入框获取CSRF令牌
    fd.append('csrfmiddlewaretoken', document.querySelector('[name=csrfmiddlewaretoken]').value);
    
    var tet = $.ajax({
        url: '/login/photoverify/',
        type: 'POST',
        data: fd,
        async: false,
        contentType: false,
        processData: false,
        success: function (response) {
            console.log(response.driverBeacon);
            document.getElementById('username').setAttribute('value', response.username);
        },
        error: function (error) {
            console.log(error);
        }
    }).responseText;
}

3. 调试表单验证错误 #

如果调整后还是有问题，建议在视图中打印表单的错误信息，快速定位问题：

if myform.is_valid():
    log.info(myform.cleaned_data)
    file = myform.cleaned_data['image']
    # 后续处理逻辑...
else:
    # 打印错误日志，便于排查
    log.info("表单验证失败：", myform.errors)

额外检查点 #

• 确认blob是有效的File/Blob对象：你已经用console.log(blob)打印了，可以检查它的类型、大小是否符合预期；
• 若需要保存图片，确保Django配置了媒体文件路径：

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

按照以上步骤调整后，应该就能正常获取cleaned_data中的图片文件了。

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