multer

1. multer 사용 이유

encType="multipart/form-data"다루기 위해 사용하는 node.js의 미들웨어입니다.
"multipart/form-data"는 파일 업로드 즉, 이미지나 영상같은 파일을 제어하는데 사용합니다.

2. multer 사용

2.1 파일 전달 받는 형식 지정

2.1.1 none()

텍스트 필드만 허용

2.1.2 any()

모든 파일을 허용 ( req.files )

2.1.3 single(filename)

filename으로 전달된 하나의 파일만 처리 ( req.file )
여러 개가 전달되면 에러 발생

2.1.4 array(filename[, maxCount])

filename으로 전달된 모든 파일 처리 ( req.files )
maxCount에 초과되는 파일개수를 보내면 에러 발생

2.1.5 fields(fields)

여러가지의 파일을 처리할 때 사용 ( req.files )

// 인수로 전달되는 fields의 형태
[
  { name: "profileImage", maxCount: 2 },
  { name: "backgroundImage", maxCount: 2 },
]

2.2 파일 저장 위치 및 파일명 지정

2.2.1 디스크에 저장

• multer.diskStorage는 디스크에 저장할 때 사용한다.
• destination은 저장할 위치를 결정한다. ( 생략시 운영체제의 임시파일을 저장하는 기본 디렉토리에 저장됨 )
• filename은 저장할 파일을 이름을 지정한다. ( 생략시 확장자 없는 랜덤한 파일명으로 생성됨 )

2.2.2 메모리에 저장

const storage = multer.memoryStorage()를 대신 사용하면 된다.

2.2.3 크기 제한

limits속성으로 여러가지 값을 지정할 수 있다. ( 자세한건 문서 참고 )

2.2.4 예시

const 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);
    
    const filename = basename + new Date().getTime() + ext;

    done(null, filename);
  }
});
const limits = { fileSize: 20 * 1024 * 1024 };

const upload = multer({ storage, limits });

3. 전체 예시

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

try {
  fs.accessSync("uploads");
} catch (error) {
  fs.mkdirSync("uploads");
}

const 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);
    
    const filename = basename + "-" + new Date().getTime() + ext;

    done(null, filename);
  }
});
const limits = { fileSize: 20 * 1024 * 1024 };

const upload = multer({ storage, limits });

router.post("/images", isLoggedIn, upload.array("image") , (req, res) => {
  res.json(req.files.map(v => v.filename));
});

4. 주의할 점

1. .single(filename)이나 .array(filename)의 filename은 <input>의 name속성이거나, FormData()에서 .append()한 속성명이랑 같아야 multer에서 인식할 수 있다.

2. 반드시 encType="multipart/form-data"이야하 한다.
   <form>은 기본적으로 encType="application/www-form-urlencoded"이기 때문에 명시적으로 선언해주거나,
   axios를 사용한다면 옵션으로 header: { "Content-Type": "multipart/form-data" }을 적용해줘야 한다.

3. 파일명은 중복될 수 있으므로 위의 예시처럼 기존 파일명 + 현재시간 + 확장자형식으로 이름을 바꿔주는 것이 좋다.

4. 디스크에 저장 시 저장할 폴더를 미리 만들어두지 않으면 에러가 발생하기 때문에 fs를 이용해서 만들어 두는 것이 좋다.

참고한 사이트

• multer-github-ko