Node.js Express 파일 업로드

Express 에서 파일 업로드를 사용하기 위해서는 “multer” 라는 모듈을 추가로 설치해서 사용해야 한다. 이 multer는 파일 전송을 할때 사용하는 multipart/form-data 를 다루는 외장 모듈이다.

Cross Origin Resource Sharing(CORS) 모듈 설정

cors 는 Cross Origin Resource Sharing(cors) 상황에 대한 제한을 해제하기 위한 모듈이다.

여기서 cors 란 http://A.com 에서 요청한 페이지 내에 http://B.com 에 대한 리소스가 들어있는 경우이다. 이럴 경우 최소 두번 이상의 연속 요청이 일어나게 되는데, 브라우저는 기본적으로 보안 이슈로 인해 cors 를 제한하고 있다.

그러나 다수의 세션에 대해 원활한 파일 업로드가 이루어 지기 위해서는 이러한 cors 제한을 해제해야 한다.

npm install cors --save

먼저, 외장 모듈인 cors 를 설치한다.

// 빌트인(내장) 모듈 불러오기
// 익스프레스 객체 및 웹 서버 객체 생성
...
// Cross Origin Resource Sharing(cors) 제한 해제를 위한 모듈
var cors = require('cors');
// 포트 설정 및 요청 대기
...
 
// 미들웨어 설정
...
app.use(cors()); // cors 제한 

그 후 app.js(server.js) 에서 해당 모듈을 불러오고, 미들웨어로 설정하여 cors 제한을 해제할 수 있도록 한다.

업로드 뷰(View) 처리

<form action="/write" method="post" enctype="multipart/form-data">
    <input type="text" name="title" value="제목이들어간다" />
    <input type="text" name="content" value="내용이들어간다" />
    <input type="file" name="attachment" />
    <input type="submit" value="업로드" />
</form>

파일을 전송하기 위해 이 포함되어 있는 <form> 태그는 반드시 enctype=”multipart/form-data” 속성을 통해 데이터를 전송해야만 한다.

multer 모듈 설정 및 라우팅 처리

multer 모듈은 multipart/form-data 를 효율적으로 처리하기 위한 외장 모듈이다. 외장 모듈이므로 npm 을 통해 설치할 수 있도록 한다.

npm install multer --save

multer 모듈의 설치가 완료 되었다면, router.js 에서 해당 모듈을 불러오고, 업로드 요청이 온 파일에 대한 처리를 작성한다.

// multipart 모듈 불러오기
var multer = require('multer');
 
// 기본 세팅
var storage = multer.diskStorage({
    destination: function(req, file, callback){
        callback(null, 'uploads')
    },
    filename: function(req, file, callback){
        callback(null, file.originalname)
    }
});
 
var upload = multer({
    storage: storage,
    limits: {
        files: 10,
        fileSize: 10 * 1024 * 1024 * 1024
    }
});
 
// 파일 업로드
router.route('/write')
    .get(upload.single('attachment'), function(req, res){
        attachment = req.file;
        title = req.body.title;
        content = req.body.content;
 
        console.log("제목 : " + title);
        console.log("내용 : " + content);
 
        if(attachment != null){
            console.log('첨부파일 정보...');
            console.dir(attachment);
        }
        
    });

multer 객체는 저장될 파일의 경로, 파일명, 파일 수, 파일 사이즈 등을 설정하고 제한하는 내용을 포함하고 있다.

limits 는 업로드 제한에 대한 설정을 정의하고 있는데, 파일 수와 파일 사이즈에 대한 제한을 두고 있다. storage 는 저장 경로, 저장 파일명 등을 정의하며, 객체 코드의 양이 많아서 인라인 객체가 아닌 별개의 객체로 선언해서 사용하고 있다.(5행)

라우터 설정에 파일 업로드에 대한 최종 처리가 진행된다. (23~37행) 라우터 함수에 다수의 콜백 함수를 입력하면, 첫 번째 인자의 함수부터 순차적으로 실행된다.

multer 객체가 담겨있는 upload 객체는 파일 업로드에 대한 두 가지 메소드를 지원한다.

업로드 후의 Response 콜백 함수에서 파일에 대한 접근은 req.file 로 가능하다.