Node.js multiparty 이용해 File upload - ajax

이 포스팅은 Windows 32bit 환경에서 진행하였으며 Node.js가 설치되어 있어야 합니다.

Node.js 설치 방법은 아래 포스트에서 확인하실 수 있습니다.

Window 환경에서 Node.js 설치 및 Hello world 출력하기

0. 만들려 하는 것

예를들어 글쓰기를 하는데 이미지 업로드가 필요한 경우, 파일을 업로드 하려면 form 태그 안에 넣어야 하는데

form 태그 안에 form 태그가 들어갈 수 없으므로 ajax를 통해 이미지를 미리 업로드하려고 했습니다.

따라서 파일을 선택하면 그 파일을 미리 서버에 저장하고 그 파일의 경로 및 이름을 return 받는 모듈을 만들 것입니다.

1. express project 생성

(1) express-generator 설치

express 프로젝트를 생성하기 위한 express-generator를 글로벌로 설치합니다

npm install express-generator -g

(npm은 Node.js가 설치되면서 자동으로 설치되며 Node.js를 설치했음에도 npm 명령어를 찾을 수 없다는 메시지가 출력될 경우 환경변수를 등록하셨는지 확인하시기 바랍니다.)

(2) project 생성

view template을 ejs로 설치하였습니다. (default 템플릿은 jade 입니다.)

express --view ejs file-upload-ajax

종속 파일들을 설치합니다.

cd file-upload-ajax && npm install

2. multiparty 설치

npm install multiparty

3. route/index.js 파일 

프로젝트 내에 temp 폴더에 파일을 저장하게 설정하였습니다.

미리 폴더를 만들어 놓아야 파일을 정상적으로 불러올 수 있습니다.

var express = require('express');
var router = express.Router();

var fs = require('fs');
var multiparty = require('multiparty');

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.post('/upload', function (req, res) {
    var form = new multiparty.Form({
        autoFiles: false, // 요청이 들어오면 파일을 자동으로 저장할 것인가
        uploadDir: 'temp/', // 파일이 저장되는 경로(프로젝트 내의 temp 폴더에 저장됩니다.)
        maxFilesSize: 1024 * 1024 * 5 // 허용 파일 사이즈 최대치
    });

    form.parse(req, function (error, fields, files) {
        // 파일 전송이 요청되면 이곳으로 온다.
        // 에러와 필드 정보, 파일 객체가 넘어온다.
        var path = files.fileInput[0].path;
        console.log(path);
        res.send(path); // 파일과 예외 처리를 한 뒤 브라우저로 응답해준다.
    });
});

module.exports = router;

4. view/index.ejs 파일

(ejs 소스 전체를 올렸더니 이상한 소스까지 출력되네요 해결방안 아시는 분은 알려주세요...)

(1) body 

(2) javascript

</body> 윗 부분에 넣어줍니다.

5. 결과

npm start

서버를 실행시킨 뒤 http://localhost:3000/ 로 접속, 파일 선택을 누르고 파일을 선택합니다.

파일을 선택하면 onChange 메소드에 의해 ajax 모듈이 실행되어 /upload로 post 됩니다.

서버에 temp 디렉토리에 파일이 저장되고 경로와 이름이 input 태그로 넘어옵니다.