multer 모듈 이용한 이미지 업로드 방법

multer 모듈을 이용하여 이미지 업로드 방법을 소개하고자 합니다. multer 모듈은 파일 업로드를 위해 사용되는 multipart/form-data를 다루기 위한 미들웨어입니다.

multer 모듈 이미지 업로드 방법

목차


multer 모듈 이용한 이미지 업로드 방법

하나의 이미지를 업로드하는 form, 여러 개 파일을 한 번에 업로드하는 form을 만들어보겠습니다. 또한, 파일 이름으로 저장되는 방법도 알아보겠습니다.


설치

npm install multer


이미지 업로드 시 알아야 할 내용

form 속성 중 enctype를 multipart/form-data로 설정해야 합니다. multipart는 서버로 전송할 때 form-data 즉, form 태그에 있는 데이터 값을 보냅니다. 또한, 이 속성은 method 속성값이 post인 경우에만 사용할 수 있습니다.

<form action=”서버 주소” method=”post” enctype=”multipart/form-data”>


하나의 이미지 업로드

form(action="/single" method='post' enctype="multipart/form-data") 
  input(type="file" name="multer" required)
  button 보내기
let multer = require('multer');
let destUpload = multer({dest:'uploads/'});
router.post('/single', destUpload.single('multer'), function(req, res) {
  res.send(req.file);
});

이미지를 업로드 하기 위해 템플릿 엔진(pug)에 form을 만들어보겠습니다.

서버 주소를 설정하는 라우터는 multer 모듈을 이용한 이미지 업로드를 해보겠습니다. 먼저, multer 모듈을 설치하고 multer 변수로 저장하겠습니다.

multer 모듈은 몇 가지 설정해야 하는 것이 있는데 파일이 저장될 위치와 저장 방식을 설정해야 합니다. 파일이 저장될 위치는 multer({dest: 업로드 위치})로 설정할 수 있습니다. 주의해야 할 점은 업로드 위치에 해당하는 폴더를 미리 생성해야 합니다. 만약, 미리 생성하지 않으면 폴더가 없다는 메시지가 생성될 것입니다.

업로드 위치를 설정했으면 form에서 받은 데이터 값을 어떻게 저장할 것인지 설정해야 합니다. 업로드 위치.저장 방식(“데이터 값의 name”) 이렇게 설정합니다. 저장 방식에는 .single(), .array(), .fields(), .none(), any()로 그 중 .single()은 하나의 이미지를 업로드합니다. req.file을 통해 이미지에 대한 정보를 확인할 수 있습니다.

multer 모듈 이미지 정보

이미지 업로드에 성공하면 위 사진과 같은 형태로 나타날 것입니다. filename을 보면 폴더에 영문과 숫자가 섞인 문자열이 생성될 것입니다. 이는 multer 모듈에서 보안을 위해 이렇게 생성되는 데 이를 파일 이름으로 폴더에 업로드되는 방법을 소개하겠습니다.


파일 이름 변경

let storage = multer.diskStorage({
  destination: function (req, file, cb) {
          cb(null,'uploads/')
      },
  filename: function (req, file, cb) {
      cb(null, `${Date.now()}-${file.originalname}`)
      }
})
let storageUpload = multer({storage});

앞서 저장 위치를 설정할 때에는 dest를 사용했는데 diskStorage를 사용하면 이미지 이름 그대로 저장할 수 있습니다. diskStorage는 파일을 서버에 저장하기 위해 저장 위치를 설정할 수 있는 destination과 이름을 설정할 수 있는 filename의 두 가지 옵션을 설정할 수 있습니다.


여러 개의 이미지 업로드

form(action="/multi" method='post' enctype="multipart/form-data")
  input(type="file" name="one" required)
  input(type="file" name="two" required)
  input(type="file" name="three" required)
  button 보내기
router.post('/multi', destUpload.fields([{name:'one'},{name:'two'},{name:'three'}]), function(req, res) {
  res.send(req.files);
});

여러 개의 이미지 업로드는 .single()을 제외하고 .array(), .fields()를 사용합니다. .array()와 .fields()는 차이점이 있는데 array는 하나의 name에 대해서 여러 개의 값을 처리할 수 있고 fields는 여러 개의 name에 대해서 처리할 수 있습니다.

소스 코드 및 실행하기