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

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

我用猫鼬在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>

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

对于在此过程中如何发送多个文件的任何解释，我们将不胜感激。还请让我知道我是否选择正确的方法来完成此任务。

谢谢！

解决方法

您的代码有逻辑错误。调用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)

    })

})