Angular使用Base64处理文件上传下载后文件无法打开问题排查

你遇到的问题核心是二进制数据与字符串的编码不匹配：

1. 上传阶段使用readAsBinaryString读取文件后再用btoa编码，这个流程会因字符编码规则丢失原始二进制信息（readAsBinaryString已被MDN标记为废弃，处理非UTF-8字符时极易出错）；
2. 下载阶段atob解码得到的是UTF-16字符串，直接传入Blob会把每个字符按16位数据存储，导致原始8位二进制被篡改，最终图片文件损坏无法打开。

修复上传逻辑 #

推荐两种更可靠的Base64编码方式，避免原始数据丢失：

方案1：用readAsDataURL（最简实现） #

readAsDataURL会直接返回带前缀的Base64字符串，只需移除前缀即可存入数据库：

const fileReader = new FileReader();
fileReader.onload = async (e) => {
  // 移除"data:文件类型;base64,"前缀
  const base64Prefix = `data:${documentName.type};base64,`;
  const encoded = (fileReader.result as string).replace(base64Prefix, '');
  // 将encoded传入API存储到数据库
};
// documentName为选中的File对象
fileReader.readAsDataURL(documentName);

方案2：用readAsArrayBuffer（最稳妥） #

通过ArrayBuffer处理原始二进制数据，彻底规避编码偏差：

const fileReader = new FileReader();
fileReader.onload = async (e) => {
  const buffer = fileReader.result as ArrayBuffer;
  const uint8Array = new Uint8Array(buffer);
  // 将Uint8Array转成Base64字符串
  const encoded = btoa(String.fromCharCode(...uint8Array));
  // 将encoded传入API存储到数据库
};
fileReader.readAsArrayBuffer(documentName);

修复下载逻辑 #

atob解码后需将字符串转成Uint8Array（8位无符号整数数组），再生成Blob才能还原原始二进制：

const documentName = 'test.jpg';
const encodedDocument = xxx; // 从数据库获取的Base64字符串
const documentFormat = 'image/jpeg';

// 解码并转换为Uint8Array
const decodedStr = atob(encodedDocument);
const uint8Array = new Uint8Array(decodedStr.length);
for (let i = 0; i < decodedStr.length; i++) {
  uint8Array[i] = decodedStr.charCodeAt(i);
}

// 生成Blob并触发下载
const blob = new Blob([uint8Array], { type: documentFormat });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
a.href = url;
a.download = documentName;
a.click();
window.URL.revokeObjectURL(url);
a.remove();

额外注意事项 #

• 彻底弃用readAsBinaryString，该方法已被标准废弃，存在不可靠的编码问题；
• JavaScript字符串默认是UTF-16编码，无法直接承载8位二进制数据，必须通过Uint8Array这类TypedArray中转；
• 可通过对比上传前后的Base64字符串、下载文件的MD5值，验证数据是否完整未被篡改。

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