显示存储为缓冲区的 MongoDB 图像

Posted 2023-03-10

【中文标题】显示存储为缓冲区的 MongoDB 图像

【英文标题】：Showing image from MongoDB that is stored as Buffer

【发布时间】：2018-06-16 03:46:03

【问题描述】：

所以我正在存储这样的图像：

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=="  />

在我的例子中，这段代码是：

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

我得到的只是一些奇怪的符号：

我想我几乎尝试了所有方法，但仍然无法弄清楚这是什么。即使我将该缓冲区转换为字符串（'ascii'），我仍然会得到一些无法识别的符号（框）。

我该怎么办？ 附言另外，这是存储图像的好方法吗？ （小于 16MB），我想我注意到它有点慢，因为那些长字符串转换和读取文件，与我只是将图像存储为文件的情况相比？

【问题讨论】：

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

您的问题解决了吗？我也对此感到困惑，存储为字符串可以节省一些会议时间。但有人说缓冲区可以节省一些空间。我只需要为每个文档存储一个图像。我可以知道你是怎么解决你的吗？ :)

【参考方案1】：

html

   <img [src]="'data:image/jpg;base64,'+Logo.data"    />

来自数据库的数据：

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

希望对你有帮助