如何访问 MongoDB 中的图像文件并使用 Express.js 将它们发送到客户端

Question

我使用 mongoose 在 MongoDB 中存储了一些图像文件。图像从 HTML 表单提交，然后通过 Express POST 请求发送到 MongoDB。然后，我想通过 GET 请求访问 MongoDB 中的这些图像文件，然后将它们发送到客户端。代码如下所示：

app.get("/showallimages", (req, res) => {

    Image.find({}).exec((error, records) => { // Image is the database schema model. 

        var img1 = Buffer.from(records[0].img.data, "base64"); // First image coming from MongoDB.
        var img2 = Buffer.from(records[1].img.data, "base64"); // Second image coming from MongoDB.
        var images = [img1, img2];

        res.writeHead(200, {
            "Content-Type": "image/png",
        })

        var i = 0;
        for (i; i <= images.length; i++) {
            res.end(images[i]); // I am expecting this to send both images to the client side, but instead I am only getting the first image to be displayed. 
        }

    })

})

如果我 console.log “images”，我会得到两个文件的二进制数据：

console.log(images); 

  <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 02 00 00 64 00 64 00 00 ff ec 00 11 44 75 63 
6b 79 00 01 00 04 00 00 00 22 00 00 ff ee 00 0e 41 64 6f 62 65 00 64 ... 8728 more bytes>,
  <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 05 39 00 00 03 84 08 06 00 
00 00 6a f3 35 f1 00 00 00 01 73 52 47 42 00 ae ce 1c e9 00 00 00 f2 ... 397757 more bytes>

我希望这会将两个图像都发送到客户端，但我只会显示第一张图像。

感谢任何关于我如何在此过程中发送多个文件的解释。如果我选择了正确的方法来实现这一点，请告诉我。

谢谢！

Answer 1

您的代码存在逻辑错误。当 res.end() 被调用时，express 在第一张图像中结束响应过程，您的循环不会到达下一次迭代。 此外，一个请求不能有多个响应。但是您可以使用 res.json(images) 发送带有 JSON 表示的 Buffer 数组。

在客户端，要显示从服务器接收到的作为缓冲区的图像：您需要将它们转换为原始格式，这样做：

// server response
const images = response.map(buffer => {
  const rawBuffer = buffer.toString("base64");
  const imageSrc = "data:image/png;base64," + rawBuffer;
  const image = document.createElemment("img");
  image.src = imageSrc;
  return image;
})

/* 
In this method you can control how you will show the images in the client 
(to test, just append to any div)
*/

或者，如果您只想显示图像而不进行任何操作，请尝试以下操作：

app.get("/showallimages", (req, res) => {

    Image.find({}).exec((error, records) => { // Image is the database schema model. 

        var img1 = Buffer.from(records[0].img.data, "base64"); // First image coming from MongoDB.
        var img2 = Buffer.from(records[1].img.data, "base64"); // Second image coming from MongoDB.
        var images = [img1, img2];

        const formatedImages = images.map(buffer => {
          return `<img src="data:image/png;base64,${buffer.toString("base64")}"/>`
        }).join("")
        
        res.send(formatedImages)

    })

})