[NodeJS] Multer로 파일 업로드 하기

미들웨어(Middleware)

: 클라이언트와 서버가 요청과 응답을 할 때 중간에서 거쳐가는 함수

• 미들웨어에서는 request, response 객체를 모두 사용 가능하고 next()함수를 이용해 다음 미들웨어로 접근이 가능하다.

app.use( (req,res,next) => {
	next(); - 미들웨어 동작을 모두 끝내고 next를 끝내면 서버 로직으로 이동한다. 
});

파일 업로드

: 클라이언트 -> 서버 데이터 전송하는 법

• multer
  • 파일 업로드를 위해 사용되는 미들웨어
  • express로 서버를 구축할 때 가장 많이 사용되는 미들웨어

<multer 설치하기> 
npm install multer 

<multer 불러오기>
const multer = require("multer");

---

클라이언트 준비

• form 태그의 enctype 속성으로 "multipart/form-data" 반드시 설정
  주의!! Multer는 multipart(multipart/form-data)가 아닌 폼에서는 동작하지 않는다.

---

파일 업로드 경로 설정

cosnt multer = require("multer");
const upload = multer({
	dest: "uploads/"
})

• dest: destination. 파일을 업로드하고 그 파일이 저장될 경로를 지정하는 속성

---

multer - 하나의 파일 업로드

• single(): 하나의 파일 업로드

app.post('/upload', upload.single('userfile'), function(req,res) {
      console.log(req.file);
      console.log(req.body);
      res.send('Upload success!');
})

multer - 파일을 업로드하지 않을 때

• none()

  app.post('/upload', upload.none(), function(req,res) {
       console.log(req.file);
       console.log(req.body);
       res.send('Upload success!');
  })

  multer - 파일 여러개 업로드

• array(): 여러 파일을 업로드할 때 사용, 하나의 요청 안에 여러 개의 파일이 존재할 때
• form 안의 input 태그 안에 multiple 넣는 것 잊지말기

app.post('/upload', upload.array('userfile'), function(req,res) {
      console.log(req.file);
      console.log(req.body);
      res.send('Upload success!');
})
///ejs파일
<form action="/upload" method="post" enctype="multipart/form-data">
	<input type="file" name="userfile" multiple>
    <button>upload</button>
</form>

---

• fields(): 여러 파일을 업로드할 때 사용, 하나의 요청이 아닌 여러 개의 요청이 들어올 때

app.post('/upload', upload.fields([{name: 'image1'}, {name: 'image2'}]), function(req,res) {
      console.log(req.file);
      console.log(req.body);
      res.send('Upload success!');
})
///ejs파일
<form action="/upload" method="post" enctype="multipart/form-data">
	<input type="file" name="image1">
    <input type="file" name="image2">
    <button>upload</button>
</form>

---

multer 정리

• single(): 하나의 파일 업로드
  - req.file: 파일 하나 / req.body: 나머지 정보
• array(): 여러 파일을 업로드할 때 사용, 하나의 요청 안에 여러 개의 파일이 존재할 때
  - req.files: 파일 n개 / req.body: 나머지 정보
• fields(): 여러 파일을 업로드할 때 사용, 하나의 요청이 아닌 여러 개의 요청이 들어올 때
  - req.files: 파일 n개 / req.body: 나머지 정보

---

multer - 세부 설정

• storage: 저장할 공간에 대한 정보
  • destination: 저장할 경로
  • filename: 파일명
  • diskStorage: 파일을 디스크에 저장하기 위한 모든 제어 기능 제공
• limits: 파일 제한
  • fileSize: 파일 사이즈 제한

  ---