서두

이번에는 도서 이미지를 등록하는 기능을 만들었다. 이미지도 따로 관리하고 싶어서 작가처럼 따로 페이지를 만들었다.

모듈

이미지를 등록하기 위해서는 multer 모듈을 새로 설치해야 한다. multer 모듈은 이미지 등록을 쉽게 해준다.

npm install --save multer

Table

image 테이블이다.

CREATE TABLE book_image (
	image_number INT PRIMARY KEY NOT NULL AUTO_INCREMENT,
	image_name VARCHAR(200) NOT NULL,
	image_path VARCHAR(200) NOT NULL,
	created_at TIMESTAMP NOT NULL DEFAULT NOW(),
	updated_at TIMESTAMP NOT NULL DEFAULT NOW(),
	admin_number INT NOT NULL,
	FOREIGN KEY (admin_number) REFERENCES admin (admin_number)

);

중요한 부분은 name과 path이고 admin_number로 등록한 사람이 누구인지 기록했다.

app.js

모듈을 설치하면 app.js에 등록을 해주어야 한다.

const multer = require("multer");

...

const fileStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "static/images");
  },
  filename: (req, file, cb) => {
    cb(null, file.filename + "-" + file.originalname);
  },
});

... 

const fileFilter = (req, file, cb) => {
  if (
    file.mimetype === "image/png" ||
    file.mimetype === "image/jpg" ||
    file.mimetype === "image/jpeg"
  ) {
    cb(null, true);
  } else {
    cb(null, false);
  }
};

...

app.use(
  multer({ storage: fileStorage, fileFilter: fileFilter }).single("image")
);

우선 fileStorage는 파일저장을 의미한다. destination은 저장위치이고 filename은 어떤 이름으로 저장할 지를 말한다.

fileFilter는 어떤 파일 형식을 저장할 지를 의미한다. 이번에는 이미지만 저장할 것이기 때문에 png, jpg, jpeg만 가능하게 했다.

마지막으로 use를 통해 multer로 등록한 내용을 저장한다.

Routes

기존 adminRoutes파일에 새롭게 추가를 했다.

const imageController = require('../controllers/admin/image');

...

routes.get('/imageRegist', imageController.getImageRegist);

routes.post('/imageRegistAction', imageController.imageRegistAction);

get은 이미지 등록하는 화면으로 이동하는 라우터고 post는 이미지를 등록하는 라우터다.

Controller

admin폴더에 image.js를 만들었다.

const Image = require("../../models/admin/image");

exports.getImageRegist = (req, res, next) => {
  res.render("admin/regist/image", {
    pageTitle: "E-Book Image Regist",
    member: req.session.user,
    admin: req.session.admin,
  });
};

exports.imageRegistAction = (req, res, next) => {
  let image = req.file;
  let adminNumber = req.session.admin.admin_number;

  Image.imageRegistAction(image, adminNumber, (err) => {
    if (err) {
      console.log("에러를 확인해주세요. : " + err);
    } else {
      res.render("admin/adminIndex", {
        pageTitle: "E-Book Image Regist",
        member: req.session.user,
        admin: req.session.admin,
      });
    }
  });
};

getImageRegist는 이미지 등록화면으로 이동시켜주는 컨트롤러이고 imageRegistAction는 이미지를 DB에 등록하는 모델을 연결했다.

Model

모델은 DB를 연결했다.

module.exports = class Image {
  constructor(image) {
    this.image = image;
  }

  static imageRegistAction(image, adminNumber, cb) {
    let imageName = image.originalname;
    let imagePath = image.path;

    let sql =
      "INSERT INTO book_image (image_name, image_path, admin_number) VALUES (?, ?, ?)";
    let param = [imageName, imagePath, adminNumber];
    if (image) {
      connection.query(sql, param, (err, row, field) => {
        if (err) {
          console.log("이미지 쿼리 오류 : " + err);
        } else {
          console.log("이미지 등록 성공!");
          cb();
        }
      });
    } else {
      console.log("등록된 이미지가 없습니다.");
    }
  }
};

image를 값으로 받아서 이름과 경로를 DB에 넣었다.

정리하기

이미지를 업로드하기 위해서는 multer 모듈을 사용하는 것이 편하다. multer모듈을 사용하면 사용자나 관리자를 등록하는 것처럼 편하게 등록할 수 있다.