如何使用Express和EJS显示用户上传的图像



基本上就是标题所说的。以下是我得到的:

我使用multer从表格中读取图像,我这样设置:

var multer = require('multer');
var express = require('express');
var path = require('path');
var router = express.Router();
var storage = multer.diskStorage({
destination: function(req, file, callback){
callback(null, './imgs/')
},
filename: function(req, file, callback) {
callback(null, "tmp" + path.extname(file.originalname));
}
});
router.route('/items/item-create/:cat_id')
.post(upload.single('img'), itemController.postItem);

这按预期工作,所以我不会提供itemController.postItem.的代码

我把这些图像保存在一个名为";imgs";,我已经做了静态的,像这样:

var app = express();    
app.use(express.static(path.join(__dirname, 'imgs')));

每个图像对应于一个mongoDB文档(称为"项"(,因此它们被命名为"项目";项目_id.jpg";。我编写了一个基本的ejs模板("item.ejs"(,它接受item文档并使用其_id生成文件名;img";标签:

<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
</head>
<body>
<p><%=it.name%></p>
<img src="<%= it._id.toString() + '.jpg' %>" alt="image">       
</body>
</html>

这是呈现模板的函数,在向/items/:item_id:发出GET请求时调用

exports.getItem = function(req, res){
Item.findOne({ _id:req.params.item_id }, function(err, item){
if(err) res.send(err);
console.log("In getItem...");
console.log(req.params.item_id);        
console.log(item);              
res.render('item', { it: item });

});
};

它正确地显示了项目名称,但拒绝加载图像,并且不知何故,程序向同一url发送了另一个GET请求,但图像名称为:item_id参数,这显然会引发一个无法读取属性"的错误;name";的";未定义";。我在这里做错了什么?

我尝试过,但它抛出了一个"ERR_HTTP_HEADERS_SENT"。

我解决了这个问题,结果发现我错误地安装了静态文件夹。由于我需要/items/上的图像(还有/categies/:cat_id/cat-details上的图像,我在问题中没有提到(,我安装了它,如下所示:

app.use(['/items/', '/categories/:cat_id/details/'], express.static(path.join(__dirname, 'imgs')));

最新更新