使用FormData+jQuery Ajax向Django传文件遇双重错误求助

数据老陈

2026-6-14

问题分析与解决方法

核心问题

你当前的代码存在两个关键错误：

启用processData: false和contentType: false时，未直接传递完整的FormData对象，而是将文件和CSRF令牌塞进普通JS对象中，导致Django无法识别CSRF令牌，同时文件上传格式无效。
移除这两个参数后，jQuery会默认将普通对象编码为URL格式，但文件属于Blob类型，无法被该编码逻辑处理，因此触发slice相关错误。

正确实现代码

直接构建完整的FormData对象，将CSRF令牌（若表单已包含则自动收集）和文件统一放入其中，再作为data参数传递：

$(".form").on("submit", function(event) {
    event.preventDefault();
    // 从当前表单构建FormData，自动收集所有字段（含CSRF令牌）
    const formData = new FormData(this);
    
    $.ajax({
        url: "/upload_profile_pic/",
        type: "POST",
        processData: false, 
        contentType: false, 
        data: formData, // 直接传递FormData对象
        success: function (data) {
            console.log("success: "+data);
        },
        error: function (data) {
            console.log(data);
        }
    });
});

关键细节说明

用表单直接生成FormData：new FormData(this)会自动抓取表单内所有输入字段，包括隐藏的CSRF令牌，无需手动获取添加，避免遗漏或格式错误。
必须保留processData: false和contentType: false：
- processData: false：阻止jQuery将FormData转为URL编码字符串，FormData本身就是适配文件上传的多部分格式。
- contentType: false：让浏览器自动设置正确的请求头（包含boundary分隔符），手动设置反而会破坏多部分表单的格式规则。