Angular前端PNG文件Base64编码后解码与原数据不一致问题

问题核心原因 #

你遇到的编码前后内容不一致问题，本质是btoa/atob API的使用场景不符合你当前的输入数据类型：

• btoa 仅支持对单字节二进制字符串（每个字符的Unicode编码值在0-255区间）做Base64编码，不支持直接处理Blob、File、ArrayBuffer、Uint8Array等二进制对象
• 当你直接把非字符串类型的data传给btoa时，JS会自动调用data.toString()做隐式转换，通常得到的是[object Blob]/[object File]这类无意义的字符串，编码后再解码当然和原始数据不一致
• 就算你的data是Uint8Array二进制数组，直接传入btoa也会因为多字节字符的转义规则导致数据丢失

正确处理方案 #

情况1：传入的data是File/Blob对象 #

用FileReader先读取内容再编码：

addImage(data: Blob): Observable<File> {
  return new Observable(observer => {
    const reader = new FileReader();
    reader.onload = () => {
      // 读取结果为DataURL，格式为data:image/png;base64,xxx，可直接提取后面的base64部分
      const base64Full = reader.result as string;
      const base64Data = base64Full.split(',')[1];
      
      const encodedImg: Image = new Image();
      encodedImg.img = {data: base64Data, contentType: 'image/png'};
      
      // 验证的话要把base64转回Blob再对比内容，不要直接对比atob的字符串
      console.log('原始文件大小', data.size);
      console.log('解码后文件大小', atob(base64Data).length); // 两者数值相等说明编码正确
      
      this.http.post<File>('/api/image', encodedImg).subscribe({
        next: res => observer.next(res),
        error: err => observer.error(err)
      })
    };
    reader.readAsDataURL(data);
  })
}

情况2：传入的data是ArrayBuffer/Uint8Array #

先转成单字节二进制字符串再编码：

addImage(data: ArrayBuffer): Observable<File> {
  const uint8 = new Uint8Array(data);
  // 把二进制数组转成btoa支持的单字节字符串
  const binaryStr = uint8.reduce((str, byte) => str + String.fromCharCode(byte), '');
  const base64Data = btoa(binaryStr);
  
  const encodedImg: Image = new Image();
  encodedImg.img = {data: base64Data, contentType: 'image/png'};
  
  return this.http.post<File>('/api/image', encodedImg);
}

额外优化建议 #

• 不需要把图片转Base64再传给后端，直接用FormData传输原始二进制文件即可，Base64会额外增加33%的体积，浪费带宽和数据库存储空间
• 验证编码正确性不要直接对比console.log的输出，原始二进制对象和atob返回的字符串类型不同，打印结果自然不一样，只要解码后的字节长度和原始文件字节长度一致，就说明编码是正确的

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