首页 > 解决方案 > 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' }

如您所见,我有标题、作者和正文,也有图像。但我不明白为什么我不能在我的网页上实现它。

标签: node.jsmongodbexpressmulter

解决方案


推荐阅读