在mongoose模式中将图像文件存储为二进制数据并在HTML表单中显示图像

Question

在mongoose模式中将图像文件存储为二进制数据并在HTML表单中显示图像

9

我正在使用Express、Node.js和Mongodb创建网页，用于上传和显示图像文件。

我使用模式将图像的二进制保存在mongodb中。

这是我的一点代码，在index.js和db.js中。

var Post = mongoose.Schema({
   image: {data: Buffer, contentType: String}
});

var post= new Post({ });
post.image.data=fs.readFileSync(req.file.path);
post.image.contentType='image/png';

以下是我提交图像文件并搜索帖子以及其图像字段后Mongo Shell的部分内容：

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

看起来似乎已经成功地将图像文件的二进制数据保存在mogngodb中，

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

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

我尝试了这个，但是出现了错误：

Failed to load resource: net::ERR_INVALID_URL

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

- Sandy Moon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Semih Gokceoglu · Accepted Answer

首先，您必须将缓冲数据转换为base64。您可以在后端或前端执行此操作，没有关系。只需使用yourBufferData.toString('base64')。然后您就可以使用它了。

但是，我建议另一种存储图像的方法，而不是存储二进制数据。假设您使用nodejs。您可以使用fs.writeFile方法在存储库中创建带有该二进制数据的图像。然后您可以将该图像路径存储在记录（数据库）中。之后，只需将文件路径放入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">