multer를 이용하여 이미지 업로드 하기

Express에서 이미지 업로드를 도와주는 모듈인 multer가 있습니다.

 

npm i multer

우선 npm을 이용해 multer를 인스톨 하도록 합니다.

 

우선, multer 관련 설정을 작성하여야 합니다.
필자는 upload.js 파일을 생성하여 코드를 작성하였습니다.

const storage = multer.diskStorage({
  destination: (req, res, cb) => {
    cb(null, "media/");
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}_${file.originalname}`);
  },
  fileFilter: (req, file, cb) => {
    const ext = path.extname(file.originalname);
    if (ext !== ".jpeg" || ".png" || ".jpg") {
      return cb(null, false);
    }
    cb(null, true);
  },
  limits: { fileSize: 20 * 1024 * 1024 },
});

 

destination - 이미지 업로드 시에, 저장될 경로인 destination을 media 폴더로 지정하여 주었습니다.
이미지 업로드 전 media 폴더를 생성하여 주셔야합니다 !

 

filename - 이미지 업로드 시, 저장되는 이미지 파일의 이름을 정의하는 부분입니다. 현재 코드에서는 타임스탬프 + 원본 파일명의 이름으로 저장됩니다.

filename을 정의하지않으면, 원본 파일명 그대로 올라갑니다. 같은 파일명을 가진 이미지를 올리게 되면 중복되어 기존 이미지가 지워지는 문제가 생길 수도 있습니다. 타임스탬프를 활용하여 저장하여 주는 것이 중복을 방지하는 가장 확실한 방법입니다.

 

fileFilter - 업로드 할 파일을 필터링 할 수 있도록 설정을 작성하는 부분입니다. 보통은 확장자명(ext)을 path를 통해 분리하여, 확장자명에 따른 업로드 여부를 결정하는데요, 지금 작성한 예시 코드에서는 주된 이미지 파일의 확장자만 업로드 시킬수 있도록 하였습니다.

 

limits - 선택적으로 파일 사이즈를 제한 할 수 있도록 해주는 설정입니다. 실서비스에서는 악의적인 이미지업로드 요청에 대비하여 limits를 설정해 주는것이 바람직합니다.

 

마지막으로 upload에 multer관련 설정을 담아 export 해줍니다.

export const upload = multer({ storage }).single("image");

뒤에 붙어 있는 single은 이미지 업로드시 이미지 파일 하나를 받겠다는 뜻입니다.
라우터에서 req.file로 업로드한 이미지 정보에 접근이 가능합니다. 

 

export const upload = multer({ storage }).array("images");

이미지 여러개의 업로드를 가능토록 하려면, array('key', 최대 파일 수) 로 작성하여 주면 됩니다.
라우터에서 req.files로 이미지가 담긴 array에 접근 할 수 있습니다.
이 외에도 fields, none 등이 존재합니다.

주의할 점은 작성한 upload의 key값의 이름과 동일한 네이밍의 이미지 formData를 전송하여 주어야 정상적으로 multer가 동작합니다.

 

사용 예시

import { upload } from "./upload";

Router.post(routes.addPlace, upload, (req, res) => {
    const { body, files } = req;
    console.log(files); // [{...image1}, {image2}]
});