将二进制/Unicode字符串转为图片及Salesforce图片附件获取问题排查

你这明显是被二进制数据的编码转换坑了——用btoa(unescape(encodeURIComponent(file.body)))处理图片这种二进制内容完全是错的，这套组合是用来处理UTF-8文本的，而图片是纯粹的字节流，这么转必然会破坏原始数据结构，导致生成的Base64无法还原成有效图片。

为什么你的方法无效？ #

encodeURIComponent会把非ASCII字符转换成%xx格式的URL编码，接着unescape会把这些编码转成UTF-8字符，但图片里的很多字节根本不是合法的UTF-8序列，这一步会直接篡改或者丢失原始字节，最后用btoa编码出来的自然是无效的Base64。

正确的处理方式，分两种情况： #

情况1：库返回的file.body是ArrayBuffer

如果file.body是ArrayBuffer类型（Chrome调试器里可以看到类型标记），直接用Uint8Array遍历字节，转成二进制字符串后再Base64编码：

function arrayBufferToBase64(buffer) {
  let binaryStr = '';
  const uint8Array = new Uint8Array(buffer);
  for (let byte of uint8Array) {
    binaryStr += String.fromCharCode(byte);
  }
  return btoa(binaryStr);
}

// 使用示例
const validBase64 = arrayBufferToBase64(file.body);
// 然后可以直接用来显示图片：
// document.querySelector('img').src = `data:image/png;base64,${validBase64}`;

情况2：库返回的file.body是Blob

如果是Blob类型，用FileReader的readAsDataURL方法最方便，它会直接帮你生成带Data URI前缀的Base64字符串：

const reader = new FileReader();
reader.onload = function(e) {
  // e.target.result 就是直接可用的Data URI格式的Base64
  document.querySelector('img').src = e.target.result;
};
reader.readAsDataURL(file.body);

额外提示 #

先在Chrome调试器里确认file.body的具体类型（ArrayBuffer/Blob/其他），再对应选择处理方式。要是库返回的是其他格式（比如Buffer，如果你用的是Node.js环境的库），那处理逻辑会略有不同，但核心都是直接操作原始字节，别用文本编码的那套工具去碰二进制数据。

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