如何使用AJAX提交含文件输入的表单 解决浏览器fakepath路径问题

浏览器出于用户隐私安全限制，本身就禁止网页获取input[type=file]选择的文件的本地真实路径，fakepath是正常的安全机制，不需要尝试获取真实路径，直接通过File API处理文件内容上传即可。

• 首先获取文件输入控件选中的File对象

// 假设你的文件输入控件id为fileUpload
const selectedFile = document.getElementById('fileUpload').files[0]
// 如果是多文件上传，遍历files数组即可

• 使用FormData封装所有表单数据（包含文件和普通字段），FormData会自动使用multipart/form-data格式编码数据，无需手动设置请求头

const formData = new FormData()
// 添加文件，第一个参数为自定义的字段名，后端要和这个字段名对应取值
formData.append('upload_file', selectedFile)
// 其他普通表单字段也可以直接添加
formData.append('username', 'test_user')
formData.append('desc', '文件描述')

• 发送AJAX请求，以fetch为例：

fetch('/your-upload-api', {
  method: 'POST',
  body: formData
  // 注意：不要手动设置Content-Type请求头，浏览器会自动生成带boundary的正确头信息
}).then(res => res.json())
.then(result => {
  // 处理上传结果
}).catch(err => {
  // 处理异常
})

Django 中上传的文件会存放在request.FILES中，不要从request.POST中取值：

from django.http import JsonResponse

def upload_handler(request):
    if request.method != "POST":
        return JsonResponse({"code": 1, "msg": "请求方式错误"})
    // 字段名要和前端FormData里append的第一个参数完全一致
    target_file = request.FILES.get("upload_file")
    if not target_file:
        return JsonResponse({"code": 1, "msg": "未获取到上传文件"})
    // 保存文件到本地
    save_path = f"./upload_files/{target_file.name}"
    with open(save_path, "wb+") as f:
        // 大文件分块写入，避免内存占用过高
        for chunk in target_file.chunks():
            f.write(chunk)
    return JsonResponse({"code": 0, "msg": "上传成功", "file_name": target_file.name})

• 如果不使用AJAX，用原生form表单直接提交，需要给form标签添加enctype="multipart/form-data"属性，否则后端无法获取到文件
• Django项目如果需要对外访问上传的文件，需要在配置中正确设置MEDIA_ROOT和MEDIA_URL，并在路由中配置静态资源映射
• 如果使用axios等请求库，直接传入FormData作为body即可，若你的请求拦截器有全局自动将请求体转为JSON的逻辑，需要给上传接口单独关闭该逻辑

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