显示使用 Multer 上传的图像

Question

I'm using Multer to upload images to my server, and I'm using mongo to store them, but I can't get them to be displayed... I'm building a sort of Movies collection. The image gets uploaded to mongoDB but I can't manage to render it. See code

index.js

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

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

module.exports = router;

collection.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);

movie_controller.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 Schema

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);

The image gets uploaded to MongoDB but doesn't get displayed. That's how I'm specifying its path

movie_detail.pug

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

and here's a screenshot of what I get

it doesn't render on movies detail

Inspecting to open in a new tab

It doesn't find the image

I believe the path it's correct. In app.js I already have

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

Can someone please help me see what I'm doing wrong? I appreciate it.

Answer 1

If I understand correctly, you store the image in public folder and save the path in MongoDB with movie.image = req.file.path; . Because you serve static files in public folder, the image should be available at http://localhost:9999/image-1621785191213.jpeg . The img tag should become:

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