Node.js | multer를 이용한 파일 업로드 (input type='file')

Node.js - React 연동 파일업로드(multer사용)관련 게시글 :  React | Node.js연동 파일 업로드 (+ multer)

 

 

1. multer 미들웨어 설치

 

multer는 multipart/form-data를 사용할 때 파일업로드를 편리하게 할 수 있도록 도와주는 Node.js 미들웨어입니다. multipart/form-data를 사용하지 않는 경우에는 multer를 이용할 수 없습니다.

$ npm install --save multer

 

 

2. multer 사용준비

 

dest는 파일이 업로드 될 경로입니다. 자신의 프로젝트 폴더 안에 uploads라는 폴더를 생성하거나 혹은 경로 값을 변경해주시면 됩니다.

var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

 

 

3. form 작성

 

상황에 맞는 폼 태그를 작성하되, encType='multipart/form-data'는 꼭 설정해주어야 합니다.

설정해주지 않을 경우 multer에서 인식하지 못합니다.

<form name='accountFrm' action='/account' encType='multipart/form-data'>
    <input type='text' name='email' />
    <input type='text' name='pwd' />
    <input type='file' name='profile_img' accept='image/jpg, image/png, image/jpeg' />
    <input type='submit' value='회원가입' />
</form>

 

 

4. route 작성

 

위의 폼 태그 작성에서 input file의 name값을 적어주시면 됩니다.

하나의 파일만 업로드할 경우에는 upload.single로 설정합니다.

 

req.body를 콘솔에 출력해보면 아시겠지만 폼 태그에 입력된 값을 모두 가져오며, file필드에 작성된 값만 req.file로 불러옵니다. req.file값을 콘솔에 출력해보면 함께 담겨온 정보들을 알 수 있습니다.

 

출처 https://github.com/expressjs/multer/blob/master/doc/README-ko.md

 

그리고 가장 편리한 점이 파일 명을 자동으로 랜덤한 값으로 설정해주기 때문에 파일명을 수정하는 수고가 덜어집니다.

		// 하나의 파일만 업로드할 경우 === single
router.post('/account', upload.single('profile_img'), function (req, res, next) {
  console.log(req.body);
  console.log(req.file);
  console.log(req.file.filename);
})

 

콘솔창 req.file 출력값

파일이 업로드 되었습니다.

 

 

 

+) 공식 문서 참고

Node.js만을 사용할 때는 이 공식문서만 보아도 충분히 하실 수 있습니다!

expressjs/multer