将图像文件存储在mongoose模式的二进制数据中,并以html格式显示图像

时间:2016-05-06 16:56:04

标签: javascript image mongodb express schema

我使用Express,Node.js和Mongodb创建上传并显示图像文件的网页。

我使用架构在mongodb中保存了图像的二进制文件。

这是我在index.js和db.js中的一些代码..

"image:     {"data:BinData(0,"iVBORw0KGgoAAAANSUhEUE....(I
just cut off the rest of the code.. cuz it was too long)          
rkJggg=="), 
"contentType" : "image/png" } 

这是我提交图像文件并搜索帖子后的mongo shell的一部分,以及它的图像字段

<img src= "data:{{image.contentType}};base64,{{image.data}}">

所以看起来它在mogngodb中成功保存了图像文件的二进制数据,

但我的问题是如何使用二进制数据在网页上显示图像。如何将二进制缓冲区数据转换为创建图像标记?

Failed to load resource: net::ERR_INVALID_URL

我试过这个,但它给了我一个错误:

{{1}}

你能告诉我如何解决这个问题吗? 我非常感谢你的帮助:((

1 个答案:

答案 0 :(得分:2)

首先,您必须将缓冲区数据转换为base64。你可以在后端或前端做它没关系。只需使用yourBufferData.toString('base64')即可。然后你可以使用它。

但是,我建议另一种存储图像的方法,而不是存储二进制数据。假设你使用nodejs。您可以使用fs.writeFile方法在包含该二进制数据的存储库中创建映像。然后,您可以将该图像路径存储在记录(db)中。在此之后,只需将文件路径放入ng-src =“您保存的文件路径”即可。以下是我使用的示例:

var path = 'upload/profiles/' +req.body.userId + '_profile.jpg';
      fs.writeFile(path, base64data, function(err) {
        if (err) return next(err);
        User.findByIdAndUpdate({
          _id: req.body.userId
        }, {
          $set: {
            profileImg: 'upload/profiles/' +req.body.userId + '_profile.jpg'
          }
        }, function(err, user) {
          if (err) return next(err);
          return res.send(user);
        });
      });

  <img ng-src="savedpath">