如何使用Fetch同时POST Blob与JSON字符串参数

嗨，我来帮你搞定这个上传难题！首先得明确核心问题：application/json请求头下，JSON.stringify()根本没法正确序列化Blob对象——这就是你传过去后Blob变成undefined的原因。而你之前用FormData出现文件损坏，大概率是用法不对，其实FormData本身就是处理这类混合数据上传的标准且高效方案，完全不用转字符串，性能开销极低。

正确的FormData使用示例 #

下面是能保证Blob完整传输、同时携带字符串参数的正确写法：

const data = { blob, firstname: 'Will' };
const formData = new FormData();

// 添加字符串参数
formData.append('firstname', data.firstname);
// 添加Blob文件，第三个参数是文件名（服务器通常需要这个识别文件类型）
formData.append('image', data.blob, 'user-avatar.png');

fetch(url, {
  method: 'POST',
  // 这里千万别手动设置Content-Type！浏览器会自动生成带boundary分隔符的正确multipart/form-data头
  body: formData
})
.then(response => response.blob())
.then(blob => { /* 处理返回结果 */ })
.catch(error => console.error('上传出错：', error));

为什么之前FormData会导致文件损坏？ #

大概率是这两个坑踩中了：

• 手动设置了Content-Type: multipart/form-data，但没加浏览器自动生成的boundary分隔符——这个分隔符是用来区分不同表单字段的，手动设置会破坏请求体结构。
• 添加Blob时没指定文件名，或者文件名格式异常，导致服务器无法正确解析二进制内容。

有没有其他替代方案？ #

如果实在不想用FormData，还有一种方式是手动构造multipart/form-data格式的请求体，但这种方式需要自己处理分隔符、编码等细节，非常繁琐且容易出错，远不如FormData省心高效，所以完全不推荐。

总结一下，正确使用FormData就是最优解：它既不用把Blob转成字符串（完全保留二进制数据，性能开销可以忽略），又能同时携带字符串参数，还是浏览器原生支持的标准方案，兼容性拉满。

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