如何在MongoDB中存储二进制图片并在客户端展示？

问题根源 #

你当前的代码直接把Multer解析后的req.file对象存入MongoDB，而req.file中的buffer二进制数据在MongoDB中会被序列化为特殊结构。前端直接转换Blob时，没有正确解析这个序列化后的二进制数据，导致图片显示破损。

解决方案一：存储为Base64字符串（快速演示） #

这种方式把图片转为Base64格式存储到数据库，前端可以直接将其作为图片的src使用。

修改后端POST接口 #

app.post('/image', multer().single("image"), (req, res) => {
  // 将二进制Buffer转为Base64字符串，并拼接成Data URL格式
  const imageBase64 = req.file.buffer.toString('base64');
  const imageDataUrl = `data:${req.file.mimetype};base64,${imageBase64}`;
  
  database.collection('test').insertOne({ image: imageDataUrl })
    .then(() => res.status(200).send('图片存储成功'))
    .catch(err => res.status(500).send(err));
});

前端展示代码 #

fetch('http://localhost:8080/image')
  .then(res => res.json())
  .then(data => {
    // 假设取数据库中的第一条图片数据
    const imgElement = document.createElement('img');
    imgElement.src = data[0].image;
    imgElement.style.maxWidth = '500px'; // 可选：限制图片大小
    document.body.appendChild(imgElement);
  });

解决方案二：本地文件存储+静态服务（生产环境推荐） #

Base64会让图片体积增大30%左右，生产环境更适合将图片存储在服务器本地，然后通过静态文件服务提供访问路径。

1. 配置Multer本地存储 #

const multer = require('multer');
const path = require('path');

// 配置存储目录和文件名规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // 确保项目根目录下的uploads文件夹存在，不存在则手动创建
    cb(null, path.join(__dirname, 'uploads'));
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名，避免重复覆盖
    const uniqueName = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}.${file.originalname.split('.').pop()}`;
    cb(null, uniqueName);
  }
});

const upload = multer({ storage: storage });

2. 修改后端接口 #

// 配置静态文件服务，让前端能访问uploads目录下的图片
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

// 图片上传接口
app.post('/image', upload.single("image"), (req, res) => {
  // 生成图片的访问URL
  const imageUrl = `http://localhost:8080/uploads/${req.file.filename}`;
  
  database.collection('test').insertOne({ image: imageUrl })
    .then(() => res.status(200).send('图片上传成功'))
    .catch(err => res.status(500).send(err));
});

3. 前端展示代码 #

fetch('http://localhost:8080/image')
  .then(res => res.json())
  .then(data => {
    const imgElement = document.createElement('img');
    imgElement.src = data[0].image;
    imgElement.style.maxWidth = '500px';
    document.body.appendChild(imgElement);
  });

兼容原有存储方式的前端处理（不推荐） #

如果你不想修改后端存储逻辑，需要正确解析MongoDB返回的序列化二进制数据：

fetch('http://localhost:8080/image')
  .then(res => res.json())
  .then(data => {
    const storedFile = data[0].image;
    // 从MongoDB返回的结构中提取二进制数据，转为Uint8Array
    const buffer = new Uint8Array(storedFile.buffer.data);
    // 创建Blob时指定正确的MIME类型
    const imageBlob = new Blob([buffer], { type: storedFile.mimetype });
    // 生成Blob URL
    const imageUrl = URL.createObjectURL(imageBlob);
    
    const imgElement = document.createElement('img');
    imgElement.src = imageUrl;
    document.body.appendChild(imgElement);
    
    // 可选：页面卸载时释放Blob URL，避免内存泄漏
    window.addEventListener('unload', () => {
      URL.revokeObjectURL(imageUrl);
    });
  });

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