求助：使用Mongoose与Express为用户附加Base64图片失败

尝试为每个用户附加从Mongo GridFS获取的Base64图片，循环追加数据后调用res.send()，但响应中图片未正确显示为Base64编码字符串，期望每个用户的image属性对应其Base64图片。

原实现代码 #

router.get("/employee", async (req, res) => {
  const getUsers = await User.find();

  if (!getUsers) {
    res.send({
      message: "No User Found",
    });
  } else {
    let bufferDecoded;
    for (var i = 0; i < getUsers.length; i++) {
        const _id = new mongoose.Types.ObjectId(getUsers[i].image.id);
        console.log(_id);
        await gfs.files
          .find({ filename: getUsers[i].image.filename })
          .toArray(async (err, files) => {
            if (!files || files.length === 0) {
              res.send({
                message: "No User Found",
              });
            } else {
              console.log("hello");
              const data = [];
              const readStream = gridfsBucket.openDownloadStream(_id);
              readStream.on("data", (chunk) => {
                data.push(chunk);
              });
              readStream.on("error", async (error) => {
                res.send(error);
              });
              readStream.on("end", async (err) => {
                let bufferBase64 = Buffer.concat(data);
                bufferDecoded =
                  "data:image/png;base64," + bufferBase64.toString("base64");
                  
                getUsers[0].image = bufferDecoded;
                
              });
             
            }
          });
      }
      res.send({
          message: "Data Fetched",
          data: getUsers
          
        });
  }
});

问题原因分析 #

1. 异步流程失控：gfs.files.find().toArray()是回调式API，await无法等待其执行完成，导致循环还没处理完所有图片流，res.send()就已执行，返回的用户数据还是原始状态。
2. 变量作用域错误：循环中用var i，变量提升会让异步回调里的i始终指向最后一个索引值。
3. 索引操作错误：getUsers[0].image = bufferDecoded固定修改第一个用户的图片，而非当前循环的用户。
4. 重复响应：若多个用户的图片不存在，会多次调用res.send()，触发响应已发送的错误。
5. 流处理未等待：GridFS下载流的end事件是异步的，没有等待流读取完成就继续执行后续代码。

修正后的代码 #

将回调式API转为Promise，用async/await确保所有异步操作完成后再发送响应：

router.get("/employee", async (req, res) => {
  try {
    const getUsers = await User.find();

    if (!getUsers || getUsers.length === 0) {
      return res.send({
        message: "No User Found",
      });
    }

    // 遍历每个用户处理图片转Base64
    for (let i = 0; i < getUsers.length; i++) {
      const user = getUsers[i];
      const _id = new mongoose.Types.ObjectId(user.image.id);
      
      // 把toArray回调转为Promise
      const files = await new Promise((resolve, reject) => {
        gfs.files.find({ filename: user.image.filename }).toArray((err, files) => {
          if (err) reject(err);
          resolve(files);
        });
      });

      if (!files || files.length === 0) {
        // 图片不存在时设置默认占位Base64，避免中断流程
        user.image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
        continue;
      }

      // 把流读取转为Promise
      const bufferBase64 = await new Promise((resolve, reject) => {
        const data = [];
        const readStream = gridfsBucket.openDownloadStream(_id);
        
        readStream.on("data", (chunk) => data.push(chunk));
        readStream.on("error", reject);
        readStream.on("end", () => {
          const buffer = Buffer.concat(data);
          resolve(`data:image/png;base64,${buffer.toString("base64")}`);
        });
      });

      user.image = bufferBase64;
    }

    res.send({
      message: "Data Fetched",
      data: getUsers
    });
  } catch (error) {
    console.error(error);
    res.status(500).send({
      message: "Error fetching data",
      error: error.message
    });
  }
});

关键改进点 #

• 用Promise封装回调式API，配合await保证异步操作顺序执行。
• 循环中使用let i避免变量作用域问题，也可直接用for...of遍历用户。
• 统一用try/catch捕获所有异常，避免未处理错误导致服务器崩溃。
• 图片不存在时设置默认Base64占位图，确保响应正常返回。
• 等待所有图片处理完成后再调用res.send()，返回完整的用户数据。

内容的提问来源于stack exchange，提问作者Tanish Gupta