必须指定 blob 的 type 为真实 mime 类型（如 "text/plain"），并用 new file() 构造完整文件对象；上传时优先使用 formdata，避免手动设置 content-type；canvas toblob 需在回调或 promise 中处理；formdata.append 第一个参数决定后端字段名，第三个参数仅影响文件名。
用 Blob 构造文件对象时，必须指定 type 才能被后端识别为有效文件
浏览器上传控件（<input type="file">）选中的文件，其 File 实例本质是带元信息的 Blob。若直接用 new Blob([data]) 创建，缺失 type 和 name，后端常拒收或解析失败。
-
type必须设为真实 MIME 类型（如"image/png"、"text/plain"），不能留空或填"application/octet-stream"（部分后端校验严格） - 要模拟完整
File对象，需用new File([blobPart], filename, { type })，而非仅new Blob() - 构造后的
File可直接塞进FormData，和原生选择的文件行为一致
const content = "hello world";
const blob = new Blob([content], { type: "text/plain" });
const file = new File([blob], "test.txt", { type: "text/plain" });
const fd = new FormData();
fd.append("file", file); // ✅ 后端收到的是标准文件字段
通过 fetch 上传 Blob 时，别手动设 Content-Type
如果绕过 FormData 直接用 fetch 传 Blob，常见错误是显式设置 headers: { "Content-Type": "..." } —— 这会覆盖浏览器自动注入的边界值（boundary），导致后端解析 multipart 失败。
- 直接传
Blob或File给fetch，让浏览器自动生成Content-Type: multipart/form-data; boundary=... - 若必须用
fetch且不走FormData，改用body: blob+ 手动Content-Type: application/octet-stream，但此时后端需按二进制流接收，不是标准文件上传 - 绝大多数场景应优先用
FormData，它天然兼容Blob/File，无需干预头信息
Canvas 导出图片转 Blob 上传，注意 toBlob 是异步的
从 <canvas></canvas> 获取图片数据时，canvas.toBlob(callback, type, quality) 是异步 API，不能直接返回 Blob；若在回调外就调用 formData.append()，会传入 undefined。
- 必须在
toBlob回调里构造File并提交，或用Promise封装：
function canvasToBlob(canvas, type = "image/png") {
return new Promise((resolve) => {
canvas.toBlob(resolve, type);
});
}
// 使用
canvasToBlob(myCanvas).then(blob => {
const file = new File([blob], "canvas.png", { type: "image/png" });
const fd = new FormData();
fd.append("image", file);
fetch("/upload", { method: "POST", body: fd });
});
后端接收不到字段名？检查 FormData.append() 的参数顺序
用 FormData.append(key, blob) 上传时，后端收到的字段名是 key，不是文件名。容易误写成 fd.append("file", file, "custom-name.txt") 却期望后端拿到 custom-name.txt 作为字段名 —— 实际上第三个参数只是覆盖 file.name，字段名仍是第一个参数 "file"。
- 字段名由第一个参数决定，与文件名无关
- 第三个参数（filename）只影响
Content-Disposition头里的filename=值，用于后端保存时命名，不影响表单键名 - 若后端路由依赖字段名（如
req.files?.avatar），必须确保append第一个参数和后端约定一致
真正容易被忽略的是：某些 Node.js 框架（如 Express + multer）默认不解析 multipart/form-data，需显式加中间件；而前端用 Blob 模拟上传时，看起来“没报错”，实则请求根本没进到文件处理逻辑 —— 先确认后端是否已启用 multipart 解析能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
