在网页中显示存储为Buffer的MongoDB图片

Question

所以我是这样存储图片的：

router.post('/', upload.single('pic'), (req, res) => {
var newImg = fs.readFileSync(req.file.path);
var encImg = newImg.toString('base64');
var s = new Buffer(encImg, 'base64');

var newCar = {
    picture: s,
    contentType: req.file.mimetype,
    link: req.body.link
}
})
});

现在数据看起来像这样：

{
    _id: 5a502869eb1eb10cc4449335,
    picture: Binary { _bsontype: 'Binary', 
                      sub_type: 0, 
                      position: 1230326, 
                      buffer: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 
                      48 44 52 00 00 05 00 00 00 03 1e 08 06 00  ... >
                    },
    contentType: 'image/png', 
    link: 'fds', 
    __v: 0
}

我希望在前端展示这张图片，效果如下：

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

在我的情况下，这段代码将是：

<img src="data:<%= c.contentType %>;base64, <%= c.picture %>" />

我一直得到一些奇怪的符号: 我试了几乎所有的方法，仍然无法弄清楚这是什么。即使我将该缓冲区转换为toString('ascii')，我仍然得到一些无法识别的符号（方框）。

我应该怎么办呢？ 另外，这是存储图像的好方法吗？（小于16MB），我发现它有点慢，因为要进行长字符串的转换和读取文件，相比直接将图像存储为文件的情况下。

- Wolfdog

---

你尝试过 c.picture.toString("base64") 吗？ - ZachB

你解决了你的问题吗？我也很困惑，将其存储为字符串可以节省一些转换时间。但有人说缓冲区可以节省一些空间。我只需要在每个文档中存储一个图像。请问你是如何解决你的问题的？ :) - Thomas Kim

Answer 1

HTML

   <img [src]="'data:image/jpg;base64,'+Logo.data" height="50" width="60" alt="Red dot" />

数据库中的数据：

 "Logo" : {
        "data" : BinData(0,"/9j/4AAQSkZJRgABAQEAYABgAAD/"),
        "name" : "dp.jpg",
        "encoding" : "7bit",
        "mimetype" : "image/jpeg",
        "truncated" : false,
        "size" : 895082
    }

希望它有所帮助。

- Chaitanya Nekkalapudi