使用Node+Mongoose+Multer从MongoDB读取图片失败求助

1. 检查Base64字符串的格式完整性 #

img标签的src要求Base64格式必须包含数据URI前缀，格式为：data:[<mediatype>];base64,<data>。如果直接把Buffer转成的Base64字符串赋值给src，会因为缺少前缀导致浏览器识别为无效URL。

解决：
确认后端返回图片的MIME类型（比如image/jpeg、image/png），前端拼接前缀后再赋值：

// 假设后端返回的base64Str是图片的Base64字符串，mimeType是图片类型
const imgSrc = `data:${mimeType};base64,${base64Str}`;
document.getElementById('img').src = imgSrc;

2. 验证Buffer转Base64的编码方式 #

后端从MongoDB读取Buffer数据时，必须用toString('base64')转换，不能用默认的utf8编码，否则会生成无效的Base64字符串。

示例后端代码（Node.js + MongoDB）：

// 从数据库读取图片文档
const imageDoc = await ImageModel.findById(id);
// 正确转换Buffer为Base64
const base64Data = imageDoc.imageBuffer.toString('base64');
// 返回给前端时带上MIME类型
res.json({
  base64: base64Data,
  mimeType: imageDoc.mimeType
});

3. 检查后端返回数据的格式 #

如果后端直接返回Buffer对象（而非转成字符串），前端收到的可能是乱码或数组格式数据，导致转Base64失败。

解决：
确保后端将Buffer转换为Base64字符串后再返回，不要直接返回Buffer。如果需要直接返回图片流，可设置响应的Content-Type为对应图片类型，此时前端可直接将接口地址赋值给img的src，无需转Base64。

4. 前端解析响应数据的正确性 #

如果后端返回JSON格式，前端需正确解析JSON，提取对应的Base64字段，不能直接使用响应文本。

示例前端代码：

fetch('/api/get-image')
  .then(res => res.json())
  .then(data => {
    const imgSrc = `data:${data.mimeType};base64,${data.base64}`;
    document.getElementById('img').src = imgSrc;
  })
  .catch(err => console.error(err));

5. 验证Base64字符串的有效性 #

把生成的Base64字符串直接放到浏览器地址栏（格式：data:image/jpeg;base64,<你的字符串>），检查是否能正常显示图片。如果不能，说明后端存储的Buffer本身损坏，或转换编码时出错。

内容的提问来源于stack exchange，提问作者Олег Лазорик