如何访问 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“图像”，我得到两个文件的二进制数据：

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)

    })

})

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

How can I access image files in MongoDB and send them to the client using Express.js

javascript

binaryfiles

mongoose

node.js

express