Angular文件上传：将Base64转换为二进制字符串遇阻

1. 提取纯Base64字符串 #

先从拿到的data:application/pdf;base64,...格式中剥离前缀，仅保留核心Base64编码部分：

const dataUri = "data:application/pdf;base64,JVBERi0xLjcNCiW1tbW1D...";
// 拆分出Base64内容
const base64Str = dataUri.split(',')[1];

2. 将Base64转为二进制数据 #

通过window.atob()解码Base64为ASCII字符串，再逐个字符转换为字节数组（Uint8Array）：

function base64ToUint8Array(base64: string): Uint8Array {
  const binaryStr = window.atob(base64);
  const byteLength = binaryStr.length;
  const bytes = new Uint8Array(byteLength);
  
  for (let i = 0; i < byteLength; i++) {
    bytes[i] = binaryStr.charCodeAt(i);
  }
  return bytes;
}

// 调用函数得到二进制数据
const fileBinaryData = base64ToUint8Array(base64Str);

3. 组装待发送数据 #

将转换后的二进制数据与其他参数组合成目标格式：

const arraytosend = [
  {
    "id": 111,
    "file": fileBinaryData
  }
];

4. 适配不同后端需求 #

• 如果后端要求接收Blob类型，可将Uint8Array转为Blob：

  const fileBlob = new Blob([fileBinaryData], { type: 'application/pdf' });
  // 此时将arraytosend中的file替换为fileBlob即可
  

• 若后端采用multipart/form-data接收文件，建议直接用FormData上传，更贴合文件上传场景：

  const formData = new FormData();
  formData.append('id', '111');
  formData.append('file', fileBlob, 'your-filename.pdf');
  // 用Angular HttpClient发送formData即可
  

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