Django中使用Ajax实现图片上传的正确方法 现有写法是否合规？

现有实现存在的问题 #

• 前端逻辑冗余：未选择新文件时不需要传递旧头像路径到后端，前端传递路径的行为还存在被恶意篡改的风险
• 后端取值逻辑不规范：同时从request.FILES和request.POST取值的逻辑完全是为了兼容前端的不合理设计，容易留下安全隐患
• 无文件校验逻辑：未校验上传文件的类型、大小，容易被上传恶意文件
• 手动处理文件路径风险高：自行替换路径字符串的操作容易出现路径遍历漏洞，也不符合Django的字段设计规范

前端优化方案 #

首先如果用户没有选择新文件，不需要传递file字段，后端直接使用数据库中已存储的头像地址即可。同时发送Ajax请求时必须添加processData: false和contentType: false参数，避免jQuery自动处理FormData导致上传失败。
优化后代码示例：

<img src="/media/{{user_profile.picture}}" width="150" height="150" alt="头像" id="pro_file"/>
<input id="upload-file" type="file" name="file" accept="image/*"> <!-- 限制只能选图片 -->

var fd = new FormData();
var vidFileLength = $('#upload-file')[0].files.length;
// 只有选了新文件才追加file字段
if(vidFileLength !== 0){
    fd.append('file', $('#upload-file')[0].files[0]);
}
// 发送Ajax的配置示例
$.ajax({
    url: '你的上传接口地址',
    type: 'POST',
    data: fd,
    processData: false, // 不处理FormData
    contentType: false, // 不自动设置Content-Type
    headers: {"X-CSRFToken": "你的Django CSRF Token"}, // 必须加CSRF校验，不然Django会拦截请求
    success: function(res) {
        // 成功后的逻辑
    }
})

后端优化方案 #

1. 优先使用Django自带的ImageField存储头像，会自动处理路径、重命名、格式校验等逻辑
2. 只在request.FILES存在file字段时才更新头像，否则保留原有值
3. 增加文件类型、大小校验
4. 不要直接把用户提交的内容转为字符串处理路径
   优化后代码示例：

from django.core.files.uploadedfile import UploadedFile
# 假设你的用户Profile模型是user_profile，头像字段是picture（ImageField类型）
if 'file' in request.FILES:
    profile_pic = request.FILES['file']
    # 校验文件类型
    allowed_types = ['image/jpeg', 'image/png', 'image/gif']
    if profile_pic.content_type not in allowed_types:
        return JsonResponse({'status': 'error', 'msg': '仅支持上传jpg、png、gif格式的图片'})
    # 校验文件大小，比如限制最大2MB
    if profile_pic.size > 2 * 1024 * 1024:
        return JsonResponse({'status': 'error', 'msg': '头像大小不能超过2MB'})
    user_profile.picture = profile_pic
    user_profile.save()
# 没传新文件的话不需要做任何操作，保留原有头像即可

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