Блог

Я пытаюсь добавить изображение к остальному контенту в блоге.

Приведенный ниже код указывает, куда вы загружаете изображение. Однако после того, как я нажму «Сохранить», блог будет создан, но изображение не будет отображаться.

 <form method="POST" enctype="multipart/form-data">
    <div class="form-group">
        <label for="image">Add image</label>
        <input value="<%= article.image %>" type="file" name="image" id="image" class="form-control" />
    </div>
    <div class="form-group">
        <label for="title">School Name</label>
        <input required value="<%= article.title %>" type="text" name="title" id="title" class="form-control" />
    </div>
    <div class="form-group">
        <label for="about">About:</label>
        <textarea name="about" id="about" class="form-control">
  <%= article.about %></textarea>
    </div>
    <div class="form-group">
        <label for="description">Location:</label>
        <textarea name="description" id="description" class="form-control">
  <%= article.description %></textarea>
    </div>
    <div class="form-group">
        <label for="markdown">Admission:</label>
        <textarea required name="markdown" id="markdown" class="form-control">
  <%= article.markdown %></textarea>
    </div>

    <a href="/" class="btn btn-secondary">Cancel</a>
    <button type="submit" class="btn btn-primary">Save</button>
</form>
 

Я пытаюсь извлечь изображение из приведенного ниже кода. Я думаю, что именно в этом и заключается проблема. Это не понимание значения= article.image из приведенного выше кода, чтобы поместить изображение в папку загрузки/изображения.

 const express = require('express')
const Article = require('./../models/article')
const router = express.Router()
const multer = require('multer');

const storage = multer.diskStorage({
  //destination for files
  destination: function (req, file, callback) {
    callback(null, './uploads/images');
  },

  //add back the extension
  filename: function (req, file, callback) {
    callback(null, Date.now()   file.originalname);
  },
});

//upload parameters for multer
const upload = multer({
  storage: storage,
  limits: {
    fieldSize: 1024 * 1024 * 3,
  },
});

router.get('/new', (req, res) => {
  res.render('articles/new', { article: new Article() })
})

router.get('/edit/:id', async (req, res) => {
  const article = await Article.findById(req.params.id)
  res.render('articles/edit', { article: article })
})

router.get('/:slug', async (req, res) => {
  const article = await Article.findOne({ slug: req.params.slug })
  if (article == null) res.redirect('/')
  res.render('articles/show', { article: article })
})

router.post('/', async (req, res, next) => {
  req.article = new Article()
  next()
}, saveArticleAndRedirect('new'))

router.put('/:id', async (req, res, next) => {
  req.article = await Article.findById(req.params.id)
  next()
}, saveArticleAndRedirect('edit'))

router.delete('/:id', async (req, res) => {
  await Article.findByIdAndDelete(req.params.id)
  res.redirect('/')
})


router.post('/', upload.single('image'), async (req, res) => {
  console.log(request.file);
  let article = new Article({
    image: req.file.filename,
  });

  try {
    article = await article.save();

    res.redirect(`articles/${article.slug}`);
  } catch (error) {
    console.log(error);
  }
});



function saveArticleAndRedirect(path) {
  return async (req, res) => {
    let article = req.article
    article.title = req.body.title
    article.about = req.body.about
    article.description = req.body.description
    article.markdown = req.body.markdown
    /* article.image = req.body.filename */
    try {
      article = await article.save()
      res.redirect('/')
      /* res.redirect(`/articles/${article.slug}`) */
    } catch (e) {
      res.render(`articles/${path}`, { article: article })
    }
  }
}

module.exports = router
 

Если бы кто-нибудь мог помочь, я был бы очень признателен