[NodeJs] multer :: Express 미들웨어

Multer
이미지, 동영상 등을 비롯한 여러 가지 파일을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어
멀티파트 형식이란
다음과 같이 enctype이 multipart/form-data인 폼을 통해 업로드하는 데이터의 형식을 의미

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="image" />
  <input type="text" name="title" />
  <button type="submit">업로드</button>
</form>

body-parser로는 처리할 수 없고 직접 파싱(해석)하기도 어려우므로 multer라는 미들웨어를 따로 사용하면 편리

multer 함수의 인수로 설정
storage 속성에는 저장 위치(destination) 이름정보(filename) 설정
destination과 filename 함수의 req 매개변수에는 요청에 대한 정보가, file 객체에는 업로드한 파일에 대한 정보가 있음
limits 속성에는 업로드에 대한 제한 사항을 설정할 수 있으며, 파일 사이즈(fileSize, 바이트 단위)는 5MB로 제한

done 함수 : 첫번째 인수는 에러, 두번째 인수 실제 경로나 파일이름
req나 file의 데이터를 가공해서 done으로 넘기는 형식
현재 설정으로는 uploads라는 폴더에 [파일명+현재시간.확장자] 파일명으로 업로드하고 있음

const multer = require("multer")

const upload = multer({ // { storage , limits } 정보 객체를 받음
  storage : multer.diskStorage( // (path , fileName) 파라미터를 받음
	{
    	destination(req,file,done){        
        	done(null, 'uploads/');
    	},
    {
    	filename(req,file,done){
        	const ext = path.extname(file.originalname);
            done(null, path.basename(file.originalname, ext) + Date.now() + ext); 
        	
        }
    })
,
limits : {flexSize: 5 * 1024 * 1024 }, 
})

uploads/ 폴더가 꼭 존재해야함. 직접 만들어주거나 fs 모듈로 서버 시작시 생성

const fs = require('fs') ;

try{
  fs.readdirSync('uploads');
}catch(error) {
 console.error('uploads 폴더가 없어 uploads 폴더를 생성합니다.');
 fs.mkdirSync('uploads');
}

파일을 하나만 업로드하는 경우 single 미들웨어를 사용
(multipart.html과 같은 경우)

app.post('/upload', upload.single('image'), (req,res)=>{
	console.log(req.file, req.body);
    res.send('ok')

})

single 미들웨어를 라우터 미들웨어 앞에 넣어두면, multer 설정에 따라 파일 업로드 후 req.file 객체가 생성됩니다. 인수는 input 태그의 name이나 폼 데이터의 키와 일치하게 넣으면 됩니다. 업로드 성공 시 결과는 req.file 객체 안에 들어 있으며, req.body에는 파일이 아닌 데이터인 title이 들어 있습니다.

여러 파일을 업로드하는 경우 input 태그에 multiple 사용

<form id="form" action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="many" multiple />
  <input type="text" name="title" />
  <button type="submit">업로드</button>
</form>

app.post('/upload', upload.array('many'), (req, res) => {
  console.log(req.files, req.body);
  res.send('ok');
});

수량이 정해진 파일 업로드

<form id="form" action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="image1" />
  <input type="file" name="image2" />
  <input type="text" name="title" />
  <button type="submit">업로드</button>
</form>

app.post('/upload',
  upload.fields([{ name: 'image1' }, { name: 'image2' }]),
  (req, res) => {
    console.log(req.files, req.body);
    res.send('ok');
  },
);

req.files.image1,
req.files.image2 로 접근 가능

파일을 업로드하지 않고도 멀티파트 형식으로 업로드하는 경우

<form id="form" action="/upload" method="post" enctype="multipart/form-data">
  <input type="text" name="title" />
  <button type="submit">업로드</button>
</form>

app.post('/upload',  upload.none(),  (req, res) => {
  console.log(req.body);
  res.send('ok');
});