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

sm·2022년 11월 26일
0

Web

목록 보기
13/24

미들웨어(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: 파일 사이즈 제한

profile
📝 It's been waiting for you

0개의 댓글