无法将Mongoose返回的Buffer数据数组转换为base64字符串

前置说明 #

你拿到的是MongoDB存储二进制数据后返回的标准BSON Buffer结构，仅需要使用其中的data字节数组完成转换即可。

Node.js 环境转换方案 #

直接调用Node.js内置的Buffer模块处理即可：

// mongoImgBuffer为MongoDB返回的完整Buffer结构对象
const buffer = Buffer.from(mongoImgBuffer.data);
// 转换为纯base64字符串
const imgBase64 = buffer.toString('base64');
// 如需直接用于img标签src属性，补充对应图片格式前缀
const imgSrc = `data:image/png;base64,${imgBase64}`;

浏览器端转换方案 #

基础写法（适合小体积图片） #

// mongoImgBuffer为MongoDB返回的完整Buffer结构对象
const uint8Array = new Uint8Array(mongoImgBuffer.data);
const imgBase64 = btoa(String.fromCharCode.apply(null, uint8Array));
// 补充图片格式前缀逻辑和Node.js环境一致
const imgSrc = `data:image/png;base64,${imgBase64}`;

大体积图片兼容写法 #

避免大数组调用apply触发栈溢出：

let binaryStr = '';
const uint8Array = new Uint8Array(mongoImgBuffer.data);
const len = uint8Array.byteLength;
for (let i = 0; i < len; i++) {
  binaryStr += String.fromCharCode(uint8Array[i]);
}
const imgBase64 = btoa(binaryStr);

注意事项 #

• 图片格式前缀需要和你存储的图片实际格式匹配：png对应image/png、jpg对应image/jpeg、gif对应image/gif，前缀错误会导致图片无法正常渲染
• 如果转换后base64无法正常显示，可先校验存储到MongoDB的二进制数据是否完整，排除入库阶段的问题

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