使用multer-gridfs-storage上传MongoDB的图片转base64显示异常求助

核心错误原因 #

• 错误地将每个GridFS分片单独转base64后拼接：base64编码是对完整二进制流整体编码，单个分片单独编码会产生冗余补位符，拼接后整体编码失效，最终导致乱码
• 未确保分片读取顺序：GridFS的chunks需要按n字段升序排列才能正确拼接，直接查询返回的结果有可能顺序异常
• 代码存在语法疏漏：fileData.push(chunks[i].data.toString('base64');缺少右括号

修复后的实现代码 #

方案1：手动拼接分片（兼容原有写法） #

const getImage = async (fileName) => {
  try {
    const fileList = await files.find({ filename: fileName });
    if (!fileList.length) throw new Error("File not found");
    const targetFile = fileList[0];
    const fileId = mongoose.Types.ObjectId(targetFile._id);
    // 必须按n升序查询分片，保证拼接顺序正确
    const chunks = await chunks.find({ files_id: fileId }).sort({ n: 1 });
    if (!chunks.length) throw new Error("No chunks found");

    // 先把所有分片的二进制数据拼接为完整Buffer
    const fullBuffer = Buffer.concat(chunks.map(chunk => Buffer.from(chunk.data.buffer)));
    // 整体转base64生成data URI
    return `data:${targetFile.contentType};base64,${fullBuffer.toString('base64')}`;
  } catch (err) {
    console.log("Get image error:", err);
    return null;
  }
};

方案2：使用官方GridFSBucket读取（更稳定，无需手动处理分片） #

mongoose内置GridFSBucket，直接读取流转Buffer更不容易出错：

const mongoose = require('mongoose');

const getImage = async (fileName) => {
  try {
    const fileList = await files.find({ filename: fileName });
    if (!fileList.length) throw new Error("File not found");
    const targetFile = fileList[0];
    const bucket = new mongoose.mongo.GridFSBucket(mongoose.connection.db);
    
    // 读取文件流转为Buffer
    const chunks = [];
    return new Promise((resolve, reject) => {
      bucket.openDownloadStream(targetFile._id)
        .on('data', chunk => chunks.push(chunk))
        .on('end', () => {
          const fullBuffer = Buffer.concat(chunks);
          resolve(`data:${targetFile.contentType};base64,${fullBuffer.toString('base64')}`);
        })
        .on('error', reject);
    });
  } catch (err) {
    console.log("Get image error:", err);
    return null;
  }
};

额外校验建议 #

如果修复后还是有问题，可以先验证上传逻辑是否正确：上传一张小图片后，直接在MongoDB中导出该文件，查看导出的图片是否可以正常打开，排除上传阶段的存储错误。

内容的提问来源于stack exchange，提问作者Maxime Dauphinot