向POST端点上传Base64转FormData文件报ERR_CONNECTION_CLOSED错误

API 探路者

2026-9-2

问题根因

你的代码存在两个致命错误，直接导致请求失败：

Base64转Blob的逻辑错误：你直接对原始Base64字符串逐字符取charCode写入Uint8Array，没有做Base64解码。Base64是用64个可打印字符表示二进制数据的编码格式，直接取字符编码得到的不是图片原始二进制内容，最终生成的是完全损坏的无效文件。
请求头配置错误：你手动将Content-Type设置为application/json，但请求体实际是FormData格式。当使用FormData作为请求体时，浏览器会自动将Content-Type设置为multipart/form-data并自动生成必填的boundary分隔符，手动覆盖Content-Type后，服务端无法正确解析请求格式，会直接断开连接，触发你看到的net::ERR_CONNECTION_CLOSED和Failed to fetch错误。

修复方法

按照以下步骤调整代码即可：

修正Base64转Blob的逻辑，先对Base64字符串做解码再生成二进制数据，如果你的Base64字符串带有data:image/png;base64,这类DataURL前缀，需要先去掉前缀再解码。
删除手动设置Content-Type: application/json的代码，不要手动修改FormData请求的Content-Type头，交给浏览器自动生成正确值。
（可选）增加响应状态码判断，方便后续排查HTTP层面的错误。

修复后的完整可运行代码：

var b64img = '你的Base64图片数据';

// 处理DataURL前缀，没有前缀也不影响逻辑
var base64Raw = b64img.includes('base64,') ? b64img.split('base64,')[1] : b64img;
// 正确解码Base64为二进制字符串
var binaryStr = atob(base64Raw);
var ab = new ArrayBuffer(binaryStr.length);
var ia = new Uint8Array(ab);

for (var i = 0; i < binaryStr.length; i++) {
    ia[i] = binaryStr.charCodeAt(i);
}
var imageBlob = new Blob([ab], { type: 'image/png' })

var myHeaders = new Headers();
// 不要在这里设置Content-Type！如果有鉴权等其他头可以正常追加
// myHeaders.append("Authorization", "Bearer 你的令牌");

var formdata = new FormData();
formdata.append("File", imageBlob, "filename.png");
// 追加其他表单字段

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: formdata,
  redirect: 'follow'
};

fetch("https://generic.address.com/endpoint", requestOptions)
  .then(response => {
    if (!response.ok) throw new Error('请求失败，状态码：' + response.status);
    return response.text();
  })
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

补充排查项：如果修正以上问题后仍然报连接关闭错误，需要依次检查接口跨域配置是否允许当前域名发起请求、服务端上传大小限制是否小于当前文件、接口服务是否正常运行、HTTPS证书是否有效。

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