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

【问题标题】：Return image binary data from api and display on html从api返回图像二进制数据并显示在html上
【发布时间】：2017-12-29 18:29:23
【问题描述】：

我将图像存储在 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));
            });
        }
    }
});

我做错了什么？

【问题讨论】：

您需要设置内容类型
您的img.data 类型是什么？ base64字符串？ BinaryStirng?
当我直接发送 img.data 并将图像 url 粘贴到浏览器时，它会提示下载。但是，当我在 img.data 上调用 toString() 并将内容类型设置为 image/jpeg 时，它会显示图像，但仅显示为空白方块。 @hoangdv 这是猫鼬的缓冲类型。我认为它将数据存储为二进制。

标签： javascript node.js express mongoose

【解决方案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 方法。它按我的预期工作，现在可以在页面上显示图像了。

【讨论】：