multer 사용하여 이미지 업로드 구현하기

Written on July 8, 2019

이미지 업로드는 보통 multipart/form-data 타입으로 전송되는데, express는 이 타입의 data를 직접 처리하는 기능을 제공하지 않기 때문에 multipart 처리용 모듈을 사용해야 한다. 대표적인 것이 Multer이다.

대부분의 경우, 이미지는 직접적으로 db에 저장하지 않고, server에 저장하고 저장 경로만 db에 저장한다. 예제에서는 루트 디렉토리의 uploads 폴더에 저장하겠다.

Multer 모듈 설치하기

yarn add multer

파일명과 저장경로를 정의하는 미들웨어를 만드는 객체 생성하기

multer.diskStorage()를 이용하여 파일명과 저장경로를 설정하는 객체를 만든다. 이 객체는 이후 multer 미들웨어를 생상하는 객체가 된다.

const express = require("express");
const multer = require("multer");
const path = require("path");

const upload = multer({
  storage: multer.diskStorage({
    destination(req, file, cb) {
      cb(null, "uploads/"); //cb 콜백함수를 통해 전송된 파일을 'uploads' 폴더에 저장
    },
    filename(req, file, cb) {
      const ext = path.extname(file.originalname); //파일 확장자
      cb(
        null,
        path.basename(file.originalname, ext) + new Date().valueOf() + ext
      ); // cb 콜백함수를 통해 전송된 파일 이름 설정(파일명 + 업로드시간 + 확장자)
    }
  })
});

Multer 미들웨어 작성하기

upload는 미들웨어를 만드는 여러가지 메서드를 가지고 있는데, 그 종류는 아래와 같다.

.single(filename) : body의 정보 중, filename으로 전송된 하나의 파일만 req.file로, 나머지 정보는 ㅍreq.body`로 접근할 수있게 함.
.array(filename, [, maxCount]) : 모두 동일한 이름으로 된 1개 이상의 파일을 array로 받아 req.files로, 나머지 정보는 req.body로 접근할 수있게 함.
.fields(fields) : 다른 이름(fields)의 파일들을 받아 req.files로, 나머지 정보는 req.body로 접근할 수있게 함. fields는 아래와 같이 전송되어야 함.

[{ name: "avatar", maxCount: 1 }, { name: "gallery", maxCount: 8 }];

.none(): text만 전송되어야 하며, file이 전송되었을 시, error를 표출함.

uploadImage라는 이름으로 /post url에 하나의 이미지 파일을 전송한 경우, 아래와 같이 작성할 수 있다. 실행이 되고 나면, uploads 폴더에 이미지가 저장된 것을 확인할 수 있다.

router.post("/post", upload.single("uploadedImage"), (req, res) => {
  console.log("file ::: ", req.file);
  console.log("body ::: ", req.body);
  res.status(201).send("success");
});