JS将PDF二进制字符串添加到FormData时编码错误如何解决

问题根因 #

• 第一个报错是因为FormData.append() 传入文件类参数时，第二个参数仅支持Blob/File类型，直接传入二进制字符串不符合参数要求。
• 第二个服务端报错是因为直接将二进制字符串传入Blob构造函数时，JavaScript会默认将字符串按UTF-8编码转换为字节流，篡改了PDF原始二进制字节的结构，导致服务端无法正常解析压缩的PDF内容。

注意：你修改后的代码中Blob构造函数的参数写法有误，Blob仅支持两个入参，文件名参数需要放在FormData.append的第三个参数位置，不能写在Blob的构造参数里。

解决方案 #

方案1（优先选择）：请求PDF数据时直接获取二进制类型 #

从上游服务端请求PDF数据时，直接指定响应类型为Blob或ArrayBuffer，避免转成字符串带来的编码污染：

fetch 示例代码

const pdfRes = await fetch('上游PDF数据源接口', {
  method: 'GET'
})
const pdfData = await pdfRes.blob()
const uploadData = new FormData()
uploadData.append('myFile', pdfData, fileName)

axios 示例代码

const pdfRes = await axios.get('上游PDF数据源接口', {
  responseType: 'blob'
})
const pdfData = pdfRes.data
const uploadData = new FormData()
uploadData.append('myFile', pdfData, fileName)

方案2：仅能拿到二进制字符串时手动转码 #

如果无法修改上游请求逻辑，只能拿到二进制格式的PDF字符串，先把字符串转成对应原始字节的Uint8Array再构造Blob：

// 把二进制字符串还原为原始字节数组
const uint8Array = new Uint8Array(pdfData.length);
for (let i = 0; i < pdfData.length; i++) {
  uint8Array[i] = pdfData.charCodeAt(i) & 0xff;
}
// 构造Blob后传入FormData
const pdfBlob = new Blob([uint8Array], { type: 'application/pdf' });
const uploadData = new FormData();
uploadData.append('myFile', pdfBlob, fileName);

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