从api返回图像二进制数据并在html上显示

Question

我正在mongodb数据库中存储图像。我想在客户端显示来自express api的响应作为图像。图像源看起来像这样

src="/image/data/5a44dde172aa021d107e7d33"

我发回这样的数据。当我将图像URL写入浏览器时，它什么也没显示。

var imgId = req.params.id;

imageModel.findById(imgId)
    .then((img) => {
        res.status(200).send(img.data);

    })
    .catch((exc) => {
        res.status(400).send();
    });

我上传这样的文件。

router.post("/", upload.any(), (req, res) => {


    if (req.files && req.files.length > 0) {
        for (var i = 0; i < req.files.length; i++) {
            var file = req.files[i];

            var image = new imageModel({ data: file.buffer.toString(), name: file.fieldname, createdBy: req.user.id });
            image.save(function (err, img) {
                if (err)
                    res.status(400).send(err);
                else
                    res.status(200).send(response.create(img));
            });
        }
    }
});

我究竟做错了什么？

Answer 1

我通过改变解决了这个问题

 file.buffer.toString()

至

 file.buffer.toString('binary')

在文件上传代码和

res.status(200).send(img.data)

至

 res.status(200).contentType("image/jpeg").send(new Buffer(img.data.toString(), 'binary'))

在获得api方法。它按照我的预期工作，图像现在可以在页面上显示。