Firefox中Blob丢失文件MIME类型问题求助（Chrome仍正常）

我之前碰到过类似的浏览器兼容性问题，Firefox Quantum（v57+）对Blob和表单数据的处理做了不少严格化的规范调整，这正是你的功能失效的核心原因——旧版的Blob打包方式已经不符合它的新解析逻辑了。

核心问题拆解 #

你之前的实现是把JSON元信息和图片文件打包成同一个Blob上传，这种“自定义拼接”的方式在旧版Firefox和Chrome中能正常工作，但Firefox Quantum之后对multipart数据的边界校验、内容拆分逻辑变得更严谨，服务器端根本没法正确区分JSON和文件内容，自然也就提取不到MIME类型、没法完成文件保存了。

推荐的修复方案（最简兼容） #

别再自己手动打包Blob了，直接用浏览器原生的FormData来分别传递JSON和文件，这种方式在所有现代浏览器（包括Firefox Quantum+、Chrome、Edge等）里都能稳定工作：

// 假设你已经拿到用户选择的文件对象file，以及要传递的JSON元数据jsonData
const uploadForm = new FormData();

// 把JSON作为单独的字段传入
uploadForm.append('metadata', JSON.stringify(jsonData));
// 直接传入原始文件对象
uploadForm.append('image_file', file);

// 用fetch发送请求（用XMLHttpRequest也一样）
fetch('/你的上传接口地址', {
  method: 'POST',
  body: uploadForm
})
.then(res => res.json())
.catch(err => console.error('上传出错:', err));

对应服务器端的调整 #

服务器端只需要从FormData里分别提取两个字段就行，不用再处理复杂的Blob拆分：

• 提取metadata字段：读取字符串内容后解析为JSON对象，拿到你需要的信息
• 提取image_file字段：获取文件流和对应的MIME类型，按照原有逻辑保存为.png/.jpg/.jpeg/.gif格式的文件

为什么这个方案更靠谱？ #

FormData是浏览器专门为表单数据传输设计的API，会自动帮你处理multipart数据的边界分隔符、Content-Disposition头、内容类型等所有细节，完全符合HTTP标准，根本不会出现兼容性问题。

如果必须保留Blob打包方式（不推荐） #

要是因为某些历史原因必须手动构造Blob，那你得严格按照multipart/form-data的规范来拼接内容，手动添加所有必要的头信息和边界符：

// 生成唯一的边界符
const boundary = `----UploadBoundary${Date.now()}`;

// 构造JSON部分的内容（带完整的multipart头）
const jsonSection = `--${boundary}\r\nContent-Disposition: form-data; name="metadata"\r\nContent-Type: application/json\r\n\r\n${JSON.stringify(jsonData)}\r\n`;

// 构造文件部分的头信息
const fileHeader = `--${boundary}\r\nContent-Disposition: form-data; name="image_file"; filename="${file.name}"\r\nContent-Type: ${file.type}\r\n\r\n`;

// 拼接所有部分成最终的Blob
const blobPieces = [
  new Blob([jsonSection], { type: 'text/plain' }),
  file,
  new Blob([`\r\n--${boundary}--`], { type: 'text/plain' })
];

const finalBlob = new Blob(blobPieces, { type: `multipart/form-data; boundary=${boundary}` });

// 之后上传这个finalBlob即可

这种方式需要手动处理所有HTTP多部分数据的细节，很容易因为换行符、边界符写错导致解析失败，维护成本极高，所以真心推荐用FormData的方案。

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