如何将bloburl传递到Django的FileField中完成文件保存

Blob URL是浏览器端生成的临时资源引用，仅在当前页面上下文有效，无法直接传递给Django后端解析，需要先转换为File对象后通过FormData提交，具体前后端实现逻辑如下：

前端处理（JS示例） #

// 替换为你的实际Blob URL
const blobUrl = "http://127.0.0.1:8000/99bbb97e-79ee-4ac5-b553-796e1f5e897e";

// 先拉取Blob对象
fetch(blobUrl)
  .then(res => res.blob())
  .then(blob => {
    // 构造FormData用于上传
    const formData = new FormData();
    // 将Blob转为File对象，可自定义文件名和文件类型
    const targetFile = new File([blob], "自定义文件名.后缀", { type: blob.type });
    formData.append("upload_file", targetFile);
    formData.append("fileDescription", "此处填写文件描述内容");
    // 提交到Django后端接口
    return fetch("/your/upload/api", {
      method: "POST",
      body: formData,
      headers: {
        "X-CSRFToken": "替换为你的Django CSRF Token值" // POST请求必须携带
      }
    })
  })
  .then(res => res.json())
  .then(data => console.log("上传结果：", data))
  .catch(err => console.error("上传失败：", err))

后端Django处理 #

视图层代码（views.py） #

from django.http import JsonResponse
from .models import UploadFile

def file_upload_api(request):
    if request.method != "POST":
        return JsonResponse({"code": 405, "msg": "请求方法不支持"}, status=405)
    # 从请求中读取文件和描述参数
    upload_file = request.FILES.get("upload_file")
    file_desc = request.POST.get("fileDescription", "")
    if not upload_file:
        return JsonResponse({"code": 400, "msg": "未获取到有效文件"}, status=400)
    # 直接存入FileField即可，Django会自动处理文件存储逻辑
    UploadFile.objects.create(
        file=upload_file,
        fileDescription=file_desc
    )
    return JsonResponse({"code": 200, "msg": "文件保存成功"})

• 提前在Django的settings.py中配置好MEDIA_ROOT和MEDIA_URL，FileField指定的upload_to路径会基于MEDIA_ROOT生成
• 前端提交FormData时不要手动设置Content-Type: multipart/form-data，浏览器会自动生成带分隔符的请求头，手动设置会导致后端解析失败
• 本地跨域测试时可临时配置跨域规则，生产环境需要严格限制跨域域名

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