NodeJS multer

▩ 개요

로컬에 있는 파일을 웹서버에 업로드하는 방법을 알아보자. 이때 필요한 미들웨어가 「multer」 이다.

▩ 설치

app$ npm install multer --save

▩ 모듈 추가

const MULTER = require("multer");

▩ 설정

◎ 확장자 없이 파일명 자동 설정

const upload = multer({dest: "uploads/", 옵션});

옵션	내용
dest 또는 storage	파일이 저장될 위치
fileFilter	어떤 파일을 허용할 지 제어하는 함수
limits	업로드 될 데이터의 한도
preservePath	파일의 base name 대신 보존할 파일의 전체 경로

◎ 확장자와 파일명을 직접 설정

const PATH = require("path");

const STORAGE = MULTER.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "tmp/my-uploads");
  },
  filename: (req, file, cb) => {
    const EXT = PATH.extname(file.originalname);
    cb(null, file.fieldname + '-' + Date.now() + EXT);
  }
});

const UPLOAD = MULTER({ storage: STORAGE });

▩ 업로드

◎ 하나의 필드명으로 하나의 파일만 업로드하는 경우

▷ 요청

<form action='/' method="POST" enctype="multipart/form-data">
  <input type="text" name="user" />
  <input type="file" accept=".pdf" name="pdfFile" />
  <input type="submit" />
</form>

▷ 응답

router.post('/', UPLOAD.single("pdfFile"), (req, res) => {
  console.log(req.body.user);
  console.log(req.file);
});

▷ req.file

{
  fieldname: ,
  originalname: ,
  encoding: ,
  mimetype: ,
  destination: ,
  filename: ,
  path: ,
  size: 
}

5.2. 하나의 필드명으로 여러개의 파일을 업로드하는 경우

5.2.1. 요청하기

<form action='/' method="POST" enctype="multipart/form-data">
  <input type="file" name="anyFiles" multiple />
  <input type="submit" />
</form>

5.2.2. 응답하기

router.post('/', upload.array("anyFiles"), (req, res) => {
  console.log(req.files);
});

5.2.2.1. req.files

[
  {
    fieldname: ,
    originalname: ,
    encoding: ,
    mimetype: ,
    destination: ,
    filename: ,
    path: ,
    size: 
  },
  {
    fieldname: ,
    originalname: ,
    encoding: ,
    mimetype: ,
    destination: ,
    filename: ,
    path: ,
    size: 
  }
]

5.3. 여러 필드명으로 각각 하나의 파일만 업로드 하는 경우

5.3.1. 요청하기

<form action='/' method="POST" enctype="multipart/form-data">
  <input type="file" name="file1" />
  <input type="file" name="file2" />
  <input type="submit" />
</form>

5.3.2. 응답하기

const fileFields = upload.fields([
  {name: "file1"},
  {name: "file2"}
]);
router.post('/', fileFields, (req, res) => {
  console.log(req.files);
});

5.3.2.1. req.files

{
  file1: [
    {
      fieldname: ,
      originalname: ,
      encoding: ,
      mimetype: ,
      destination: ,
      filename: ,
      path: ,
      size: 
    }
  ],
  file2: [
    {
      fieldname: ,
      originalname: ,
      encoding: ,
      mimetype: ,
      destination: ,
      filename: ,
      path: ,
      size: 
    }
  ]
}

5.4. 여러 필드명으로 각각 하나의 파일 혹은 여러 파일을 업로드 하는 경우

5.4.1. 요청하기

<form action='/' method="POST" enctype="multipart/form-data">
  <input type="file" name="single" />
  <input type="file" name="multi" multiple />
  <input type="submit" />
</form>

5.4.2. 응답하기

const fileFields = upload.fields([
  {name: "single"},
  {name: "multi"}
]);
router.post('/', fileFields, (req, res) => {
  console.log(req.files);
});

5.4.2.1. req.files

{
  single: [
    {
      fieldname: ,
      originalname: ,
      encoding: ,
      mimetype: ,
      destination: ,
      filename: ,
      path: ,
      size: 
    }
  ],
  multi: [
    {
      fieldname: ,
      originalname: ,
      encoding: ,
      mimetype: ,
      destination: ,
      filename: ,
      path: ,
      size: 
    },
    {
      fieldname: ,
      originalname: ,
      encoding: ,
      mimetype: ,
      destination: ,
      filename: ,
      path: ,
      size: 
    }
  ]
}

6. 파일 개수 제한

const fileFields = upload.fields([
  {name: "single"},
  {name: "multi", maxCount: 3}
]);