Multer를 이용한 이미지 업로드

📌 Multer란?

Node.js 환경에서 파일 업로드를 하기 위한 미들웨어이다.
multipart/form-data 형식으로 단일 및 다중 파일업로드를 지원한다.

1. multer 설치

$ npm i multer

2. 모듈 가져오기

const multer = require('multer');
const fs = require('fs');

• fs : FileSystem의 약자로 파일 처리와 관련된 모듈, 여기서는 이미지가 저장될 디렉토리가 있는지 검사하고 없으면 생성하도록 활용

3. 이미지 저장 디렉토리 검사 및 생성

try {
  fs.accessSync('uploads')
} catch (error) {
  console.log("Create folder for 'uploads'.");
  fs.mkdirSync('uploads');
};

4. 이미지 업로드 구현

const upload = multer({
  storage: multer.diskStorage({
    destination(req, file, done) {
      done(null, "uploads");
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname);
      const basename = path.basename(file.originalname, ext);
      done(null, basename + '_' + new Date().getTime() + ext);
    },
  }),
});

• diskStorage : 로컬 디렉토리를 의미, 추후 S3로 변경
• filename : 이미지가 저장될 이름, 이미지 이름의 중복 방지를 위하여 원본 이름과 업로드 시간을 합쳐 저장하도록

5. 이미지 업로드 라우트

5-1. 단일 이미지 업로드

router.post('/image', upload.single('image') (req, res) => {
  console.log(req.file);
  res.status(200).json(req.file);
});

5-2. 다중 이미지 업로드

router.post('/images', upload.array('image'), (req, res) => {
  console.log(req.files);
  res.status(200).json(req.files.map((v) => v.filename));
});

• 단일 이미지 업로드할때는 upload.single('key값') 메소드를 사용하며,
  다중 이미지 업로드할때는 upload.array('key값') 메소드를 사용한다.
• 각 메소드의 매개변수에는 key값이 들어가는데 이는 client에서 요청할 때 전송한 key값과 동일해야 한다.