顯示使用 Multer 上傳的圖像

Question

我正在使用 Multer 將圖像上傳到我的服務器，並且我正在使用 mongo 來存儲它們，但我無法讓它們顯示出來......我正在構建一種電影集合。 圖像被上傳到 mongoDB 但我無法渲染它。 查看代碼

index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', (req, res) => {
  res.redirect('/collection');
});

module.exports = router;

集合.js

var express = require('express');
var router = express.Router();
const multer = require('multer');

const movie_controller = require('../controllers/movieController');

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'public');
  },
  filename: (req, file, cb) => {
    const suffix = file.mimetype.split('/');
    cb(null, `${file.fieldname}-${Date.now()}.${suffix[1]}`);
  },
});

const upload = multer({ storage });

router.get('/', movie_controller.index);

router.get('/movie/create', movie_controller.movie_create_get);

router.post(
  '/movie/create',
  upload.single('image'),
  movie_controller.movie_create_post
);

router.get('/movie/:id/delete', movie_controller.movie_delete_get);

router.post('/movie/:id/delete', movie_controller.movie_delete_post);

router.get('/movie/:id/update', movie_controller.movie_update_get);

router.post(
  '/movie/:id/update',
  upload.single('image'),
  movie_controller.movie_update_post
);

router.get('/movie/:id', movie_controller.movie_detail);

router.get('/movies', movie_controller.movie_list);

電影控制器.js

const Movie = require('../models/movie');
const { body, validationResult } = require('express-validator');

var async = require('async');

// ...

exports.movie_create_post = [
  (req, res, next) => {
    if (!(req.body.genre instanceof Array)) {
      if (typeof req.body.genre === 'undefined') req.body.genre = [];
      else req.body.genre = new Array(req.body.genre);
    }
    next();
  },
  body('title', "Title can't be empty").trim().isLength({ min: 1 }).escape(),
  body('year', "Year can't be empty").trim().isLength({ min: 1 }).escape(),
  body('duration').trim().optional({ checkFalsy: true }).escape(),
  body('synopsis', "Summary can't be empty").trim().isLength({ trim: 1 }).escape(),
  body('director', "Director can't be empty").trim().isLength({ min: 1 }).escape(),
  body('imdb').trim().optional({ checkFalsy: true }).escape(),
  body('genre.*').escape(),

  (req, res, next) => {
    const errors = validationResult(req);

    let movie = new Movie({
      title: req.body.title,
      year: req.body.year,
      duration: req.body.duration,
      synopsis: req.body.synopsis,
      director: req.body.director,
      imdb: req.body.imdb,
      genre: req.body.genre,
      image: req.file.path,
    });

    console.log(req.body, req.file);

    if (!errors.isEmpty()) {
      async.parallel(
        {
          directors: (callback) => {
            Director.find(callback);
          },
          genres: (callback) => {
            Genre.find(callback);
          },
        },
        (err, results) => {
          if (err) {
            return next(err);
          }

          for (let i = 0; i < results.genres.length; i++) {
            if (movie.genre.indexOf(results.genres[i]._id) > -1) {
              results.genres[i].checked = 'true';
            }
          }
          res.render('movie_form', {
            title: 'New Movie',
            directors: results.directors,
            genres: results.genres,
            movie: movie,
            errors: errors.array(),
          });
        }
      );
      return;
    } else {
      movie.save((err) => {
        if (err) { return next(err); }
        res.redirect(movie.url);
      });
    }
  },
];

// ...

exports.movie_update_post = [
  (req, res, next) => {
    if (!(req.body.genre instanceof Array)) {
      if (typeof req.body.genre === 'undefined') req.body.genre = [];
      else req.body.genre = new Array(req.body.genre);
    }
    next();
  },
  body('title', "Title can't be empty").isLength({ min: 1 }).escape(),
  body('year', "Year can't be empty").isLength({ min: 1 }).escape(),
  body('duration').optional({ checkFalsy: true }).escape(),
  body('synopsis', "Summary can't be empty").isLength({ trim: 1 }).escape(),
  body('director', "Director can't be empty").isLength({ min: 1 }).escape(),
  body('imdb').optional({ checkFalsy: true }).escape(),
  body('genre.*').escape(),

  (req, res, next) => {
    const errors = validationResult(req);

    let movie = new Movie({
      title: req.body.title,
      year: req.body.year,
      duration: req.body.duration,
      synopsis: req.body.synopsis,
      director: req.body.director,
      imdb: req.body.imdb,
      genre: typeof req.body.genre === 'undefined' ? [] : req.body.genre,
      _id: req.params.id,
    });

    if (req.file) {
      movie.image = req.file.path;
    }

    if (!errors.isEmpty()) {
      async.parallel(
        {
          directors: (callback) => {
            Director.find(callback);
          },
          genres: (callback) => {
            Genre.find(callback);
          },
        },
        (err, results) => {
          if (err) {
            return next(err);
          }

          for (let i = 0; i < results.genres.length; i++) {
            if (movie.genre.indexOf(results.genres[i]._id) > -1) {
              results.genres[i].checked = 'true';
            }
          }

          res.render('movie_form', {
            title: `Update ${results.movie.title}`,
            directors: results.directors,
            genres: results.genres,
            movie: movie,
            errors: errors.array(),
          });
        }
      );
      return;
    } else {
      Movie.findByIdAndUpdate(req.params.id, movie, {}, (err, themovie) => {
        if (err) {
          return next(err);
        }
        res.redirect(themovie.url);
      });
    }
  },
];

movie.js架構

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var MovieSchema = new Schema({
  title: { type: String, required: true },
  year: { type: String, required: true },
  duration: String,
  synopsis: { type: String, required: true },
  director: { type: Schema.Types.ObjectId, ref: 'Director', required: true },
  imdb: String,
  genre: [{ type: Schema.Types.ObjectId, ref: 'Genre', required: true }],
  image: String,
});

MovieSchema.virtual('url').get(function () {
  return '/collection/movie/' + this._id;
});

module.exports = mongoose.model('Movie', MovieSchema);

圖像被上傳到 MongoDB 但沒有顯示。 這就是我指定其路徑的方式

movie_detail.pug

div(class='movie-img')
        figure
          img(src=movie.image alt=movie.title)

這是我得到的截圖

它不會在電影細節上呈現

檢查以在新選項卡中打開

找不到圖片

我相信這條路是正確的。 在app.js我已經有了

app.use(express.static(path.join(_dirname, 'public')));

有人可以幫我看看我做錯了什么嗎？ 我很感激。

Answer 1

如果我理解正確，您將圖像存儲在public中並將路徑保存在 MongoDB 中， movie.image = req.file.path; . 因為您在public文件夾中提供 static 文件，所以圖像應該在http://localhost:9999/image-1621785191213.jpeg 。 img 標簽應該變成：

<img src="/image-1621785191213.jpeg">