1

我已经检查了这篇文章和这篇文章，但它们不起作用。我使用gridfs-locking-stream成功地将 .png 图像存储在 mongodb 中，并检索了该图片。

这是执行db.fs.files.find().pretty()命令 后数据库的样子：数据库 我编写了一个名为sendFileToView的函数，以便可以多次使用它。该函数接收图片的id并返回readStream：

function sendFileToView(id, callback) {
gfs.createReadStream({_id: id},
    function (err, readstream) {
        if (err) callback(err, null);
        else {
            if (readstream) {
                callback(null, readstream);
            }
        }
    });
}

我在我的路由器中使用这个功能，如下所示：

PicturesRouter.route('/:picId')

.get(function (req, res, next) {
    console.log(req.params.picId);
    GridFS.sendFileToView(req.params.picId,
        function (err, readStrem) {
            if (err) next(err);
            else if (readStrem) {
                res.writeHead(200, {'Content-Type': 'image/png'});
                readStrem.pipe(res);
            }
        })
});

现在在我的客户端我有这项服务。该服务有一个简单地返回 $resource 的函数，以便我可以在我的控制器中使用它：

.service('lessonsService', ['$resource', '$http', 'baseURL',
function ($resource, $http, baseURL) {
  this.picturesRes = function () {
    return $resource(baseURL + 'pictures/:id');
  }
}])

最后，这就是我尝试在我的 html 页面中显示图像的方式：

lessonsService.picturesRes().get({id: "59a14427884e6a1f58a1e21d"})
    .$promise.then(function (response) {
      console.log('success function');
      console.log(response);
      $scope.imgSource = 'data:image/jpeg;base64,' + btoa(response);
    },
    function (response) {
      console.log("failure function");
      console.log(response);
    });

在 HTML 中：

<img src={{imgSource}} alt="Something">

如您所见，我正在控制台中打印响应以查看它的外观。这就是我得到的： 控制台输出

输出看起来很奇怪，问题是图片没有显示在视图中。我已经工作了好几个星期了。如果你帮助我会好吗？

4

0 回答 0