Nodejs 파일 선택하면 저장하기(multer 미들웨어)

파일 선택창

사용자가 input 태그를 통해 이미지 파일 선택을 하면, 해당 이미지 파일을 저장하는 업로드 기능을 구현하는 방법이다.

파일 선택하면 저장하는 법

1. npm install multer
   
   
   
2. HTML - form 태그로 감싼 input 태그 만들기(name 중요)
   

   <form id="imgForm" method="POST" enctype="multipart/form-data", action="/uploadImg">
     <input type="file" id="inputImg" name="myImg" accept=".jpg,.png">
   </form>

3. 스크립트 - input 태그로 파일 선택을 하면 form 태그 submit 시키기
   

   $('#inputImg').on('change',submit);
   
   function submit() {
     $('#imgForm').submit();
   }

4. app.js - multer 를 이용해 라우팅 처리하기
   

   // app.js
   
   var multer = require('multer');
   
   var imgStorage = multer.diskStorage({
     destination: function(req, file, callback) {
       callback(null, 'public/img'); // 저장할 파일 경로
     },
     filename: function(req, file, callback) {
       fName = file.originalname; // 저장할 파일명 = 원래 파일명
       callback(null, fName);
     }
   });
   
   var imgUpload = multer({
     storage: imgStorage,
     fileFilter: function(req, file, callback) {
       var ext = path.extname(file.originalname);
       console.log('ext : '+ ext);
       if (ext !== '.png' && ext !== '.jpg' && ext !== '.JPG' && ext !== '.PNG') {
         console.log('not png, jpg');
         //return callback(null, false);
       } else {
         console.log('correct png, jpg');
         callback(null, true);
       }
     }
   });
   
   app.post('/uploadImg', imgUpload.single('myImg'), function(req, res) { 
     res.json({done:1}); // 파일 업로드 후의 작업 작성
   });

   - 주석으로 적어둔 파일 저장 경로와 파일명 그리고 파일 업로드 후의 작업을 상황에 맞게 작성하면 되겠다.
   - single() 함수는 단일 파일을 저장할 때 쓰이며, 파일이 여러개일 경우 array(), fields() 이라는 함수를 쓴다.
   - single() 의 파라미터로 input 태그의 name 을 입력해야 한다.
   
   

이전에 포스팅한 이미지 파일 미리보기 기능과 연계하여, 미리보기 확인 후 업로드하는 기능을 만들어도 좋을 것 같다.

[개발/Nodejs] - jQuery 이미지 파일 선택시 보여주기