javascript - 从 MongoDB (mongoose) 检索/发布图像

Question

我过去一直在尝试使用 mongodb 中的图像。由于每个文档的大小限制为 16mb，我一直在寻找的每个地方都说使用 GridFS。但是，每个要存储的文档 ID 都小于 16mb。我目前是这样存储的

var testChamp = new Champion ({
    name: "Aatrox",
    img: fs.readFileSync("D:/CounterMe/Aatrox_0.jpg"),
    contentType: "jpg"
});
testChamp.save(function() {
    console.log("Saved");
}) 

在我的架构中:

name: String,
img: Buffer,
contentType: String `

在 mongoshell 中找到此信息会导致 cmd 中出现大量行，因此我不确定我是否正确存储了它。如果是，我不知道如何将它插入到我的 html 中。我知道如何检索名称，将其作为对象传递:

app.get("/", function(req, response) {
    Champion.find(function(err, champs) {            
        response.render("index", {
        champ: champs[0]
        });            
    });
});

但是，一旦我检索到 champs[0].img，我就不确定如何处理它。我应该如何将 img 传递到我的 HTML 中？任何帮助将不胜感激，我目前很困惑。

Answer 1

您真的不应该尝试在 HTML 中呈现。我见过一些方法，但它们通常都很糟糕，而且有一个很好的理由。

浏览器实现了缓存，因此它之前检索到的任何“图像”都将保存在该缓存中。但是，如果您试图以某种方式“嵌入”该图像数据(例如通过 Base64 编码)，您基本上就是在丢弃该缓存功能并导致该数据随每个请求一起发送。

如果您必须以这种方式将图像存储在 MongoDB 中，那么您的 API 中应该有一个单独的端点，它会返回基本上只是图像的内容。因此，让所有请求“看起来像”它们只是从 Web 服务器获取图像。

首先稍微更改您的数据以反射(reflect)什么是“文件名”:

var testChamp = new Champion ({
    name: "aatrox.jpg",
    img: fs.readFileSync("D:/CounterMe/Aatrox_0.jpg"),
    contentType: "image/jpg"
});

然后你会有这样的 Controller 代码:

app.get("/images/:image", function(req,res) {
    Champion.findOne({ "name": req.param.image },function(err,champ) {
       res.set("Content-Type", champ.contentType);
       res.send( champ.img );
    });
});

在您的模板中，您只需像往常一样引用图像的 URL。您可以添加它，甚至可以存储诸如内容长度之类的东西，并将其也设置在响应 header 中。还有一些模块可用于在存储图像之前检测通过另一个 API 点上传的图像的 mime 类型和大小。环顾四周寻找这些。

这很有意义，而且比在 HTML 中发送所有图像数据的其他方式更有效。