[ NodeJS ] Multer 복수 필드 업로드

Multer

Multer는 multipart/form-data 를 컨트롤 할 수 있는 NodeJS 미들웨어입니다.

https://www.npmjs.com/package/multer

사용함으로써 Request Body 의 File 객체를 쉽게 컨트롤 할 수 있습니다.

여러 옵션들을 편리하게 제공합니다.

프론트엔드 구성

프론트 영역에서는 전송할 폼 필드 이름만 설정해 주시면 됩니다.

각 프레임 워크별로 별도의 폼빌더 등이 있을 수 있지만 생략하고 일반 html 기준으로는 다음과 같습니다.

<form action="/profile" method="post" enctype="multipart/form-data">
  <input type="file" name="file" />
</form>

노드 모듈 설치

$ npm install multer --save $ npm install multer-s3 --save

저장 목적지를 s3로 바로 올리는 플러그인도 존재합니다.

세가지 주요 메소드

.single(fieldname) 하나의 파일을 업로드 할때 사용합니다. file에 복수의 파일을 허용하지 않습니다.

.array(fieldname[, maxCount]) 복수의 파일을 업로드 할때 사용합니다. html에서 multiple 속성이 허용되거나 폼데이터에서 File 이 FileList 에 담겨올경우 입니다.

.fields(fields) 여러 파일 필드를 처리하는 메소드입니다.

처음에 유튜브등에 다른 유저들의 영상의 경우 single과 array만 사용한 예제뿐이라서

문서를 보기 전까지 fields 타입이 있는 줄 모르고 업로드 하나의 과정을 각각 비동기 처리했던 경험이 있는데

.fields를 사용하면 매우 쉽게 해결할 수 있습니다.

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

maxCount 옵션은 생략할 수 있습니다.

서비스 생성

const fileFilter = (req, file, cb) => {
    if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png' || file.mimetype === 'image/gif') {
        cb(null, true);
    } else {
        cb(new Error('Invalid Mime Type, only JPEG/PNG/GIF'), false);
    }
}

const upload =
multer({
  fileFilter : fileFilter,
  storage: multerS3(
  {
    s3: 's3설정값',
    bucket :  function (req, file, cb) {
      cb(null, req.body.bucket)
    },
    acl: 'public-read',
    metadata: function (req, file, cb) {
      cb(null, {fieldName: '버킷이름'});
    },
    key: function (req, file, cb) {
      cb(null, '저장할 파일명');
    }
  })
})

fileFilter 인자 등을 넣어서 형검사를 선행 할 수 있습니다.

업로드 처리

const singleUpload = upload.single('uploads');
const arrayUpload = upload.array('uploads');
const multipleUpload = upload.fields([{ name: 'cover', }, { name: 'uploads', }]);

업로드 확인

구조만 익숙해지면 정말 사용하기 쉬운 모듈 같습니다.