8

我有一个使用 GridFS 存储在 Mongo 中的小 .png 文件。我想使用 Node + Express + Jade 在我的网络浏览器中显示图像。我可以很好地检索图像，例如：

FileRepository.prototype.getFile = function(callback,id) {
this.gs = new GridStore(this.db,id, 'r');
this.gs.open(callback);
};

但我不知道如何使用 Jade View Engine 渲染它。文档中似乎没有任何信息。

谁能指出我正确的方向？

谢谢！

4

2 回答 2

16

我想通了（感谢蒂莫西！）。问题在于我对所有这些技术以及它们如何组合在一起的理解。对于任何有兴趣使用 Node、Express 和 Jade 显示来自 MongoDB GridFS 的图像的人...

我在 MongoDB 中的文档引用了存储在 GridFS 中的图像，这是一个存储为字符串的 ObjectId。例如 MyEntity {ImageId:'4f6d39ab519b481eb4a5cf52'} <-- 注意：ObjectId 的字符串表示形式。我将它存储为字符串的原因是因为存储 ObjectId 让我在路由中感到痛苦，因为它呈现为二进制，我不知道如何解决这个问题。（也许有人可以在这里提供帮助？）。无论如何，我的解决方案如下：

FileRepository - 从 GridFS 检索图像，我传入一个字符串 ID，然后将其转换为 BSON ObjectId（您也可以通过文件名获取文件）：

FileRepository.prototype.getFile = function(callback,id) {
   var gs = new GridStore(this.db,new ObjectID(id), 'r');
   gs.open(function(err,gs){
      gs.read(callback);
   });
 };

Jade 模板- 渲染 HTML 标记：

img(src='/data/#{myentity.ImageId}')

App.JS 文件- 路由（使用 Express） 我为动态图像设置了“/data/:imgtag”路由：

app.get('/data/:imgtag', function(req, res) {
  fileRepository.getFile( function(error,data) {
     res.writeHead('200', {'Content-Type': 'image/png'});
     res.end(data,'binary');
  }, req.params.imgtag );
});

这就是工作。任何问题让我知道:)

于 2012-03-24T03:30:27.720 回答
8

我对您在这里尝试做的事情感到有些困惑，因为 Jade 是一种用于文本输出（例如 HTML）的简洁标记语言，而不是二进制内容。

由于您使用的是 Jade，因此您可能会遇到以下情况：

app.get/'images/:imgtag', function(req, res) {
    res.render('image', {imgtag: req.params.imgtag);
});

所以试试这个：

app.get/'images/:imgtag', function(req, res) {
    filerep.getFile( function(imgdata) {
        res.header({'Content_type': 'image/jpeg'})
        res.end(imgdata);
    }, req.params.imgtag );
});

这将发送原始文件作为对具有正确 mime 类型的 HTTP 请求的响应。如果您想使用 Jade 提供模板（例如图像弹出窗口），您可以为弹出窗口使用不同的路由，甚至使用 data: uri 并在页面中对图像数据进行编码。

于 2012-03-23T21:12:31.160 回答