node.js - Multer 不显示
问题描述
我正在使用 multer、MongoDB 和 expressjs,但问题在于 multer。因为我可以将我的图像上传到我的public/uploads/
文件夹,但我不能在我的网页中显示它。
当我这样做时console.log(article.img)
,我得到public\uploads\image.png
:
然后这是我的一部分route.js
:
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/uploads')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
})
const upload = multer({storage: storage})
[...]
router.post('/add',upload.single('img'), function(req, res){
var article = new Article({
title: req.body.title,
author: req.user._id,
img: req.file.path,
body: req.body.body,
});
这是我获得单篇文章的编码:
router.get('/:id', function(req, res){
Article.findById(req.params.id, function(err, article){
//User.findById(article.author, function(err, user){
res.render('article', {
article:article,
//imagePath: article.img,
//author: user.name
});
});
});
这是我的相关add_article.pug
页面:
extends layout
block content
h1 #{title}
form(method='POST', enctype = "multipart/form-data", action='/articles/add')
#form-group
label Title:
input.form-control(name='title', type='text')
#form-group
label Author:
input.form-control(name='author', type='text')
#form-group
label Body:
textarea.form-control(name='body')
.file-field.input-field(method="post")
.btn.grey
label File
input(name='img', type='file', enctype="multipart/form-data")
br
input.btn.btn-primary(type='submit',value='Submit')
**这也是我的article.pug
:
extends layout
block content
br
//h5 Written by #{author}
h1= article.title
p= article.body
img.img-responsive(src=article.img, alt=article.img)
您上传了一些文章,您可以写标题、作者、正文,并为该文章添加图片。就像它发生在媒体或 webwhatsapp 中一样。
这是我的文件信息:
{ fieldname: 'img',
originalname: 'image.png',
encoding: '7bit',
mimetype: 'image/png',
destination: 'public/uploads',
filename: 'image.png',
path: 'public\\uploads\\ateş ulsuu.png',
size: 4084 } [Object: null prototype] {
title: 'ZAİB SİTESİ DENEME',
author: 'ALP EREN GÜL',
body: 'asdasdsad' }
如您所见,我有标题、作者和正文,也有图像。但我不明白为什么我不能在我的网页上实现它。
解决方案
推荐阅读
- flutter - 在顶部添加新项目时在 ListView 中保持滚动位置
- nginx - VideoJS中从多个FFMPEG到RTMP命令的HLS流不断重复片段
- python - 在混乱的能源数据中寻找层次结构
- python - 使用 Google 的 Python 客户端库删除日历事件
- c# - 将数组传递给特定类型的函数
- java - Appium 框架:为什么我无法解决“驱动程序”的此错误消息。硒已安装
- sql-server - 当第一个 SELECT 不返回任何内容时,UNION 返回 NULL
- vb.net - 从同一交换机 vb.net 中的案例跳转
- android - 捕获按钮旁边的 Android 图库按钮
- c# - C# Web API 对象