[WebApp / Express] HTTP POST 방식을 통한 Form 데이터 전송

이번 글에서는 HTTP POST 방식을 이용하여 Form 데이터 전송을 하는 방법에 대하여 알아보기로 하겠습니다.

특히 Express 3.x에서 Express 4.x으로 버전업 되면서 파일 업로드 방식이 조금 더 어려워졌습니다.

Express 4.x은 Connect 모듈 dependency가 더이상 지원되지 않으며 Connect 모듈의 multipart() 미들웨어가 사라졌습니다. 그러나 다른 미들웨어들은 개별적인 모듈로 설치가 가능해졌습니다.

Express 4.x에서의 파일 업로드 방법에 대해서도 알아보기로 하겠습니다.

multer 미들웨어 설치

Express 4.x에서 파일 업로드를 위해 multer 미들웨어 설치는 필수입니다. Terminal에서 다음 명령을 입력하여 multer 미들웨어를 설치합니다.

$ sudo npm install multer --save




또는 package.json에 dependencies를 정의하고 Terminal에서 $ sudo npm install 명령을 무방합니다.

package.json 예

{
  "name": "Express App",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon app.js"
  },
  "dependencies": {
    "body-parser": "^1.13.3",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "^4.13.3",
    "jade": "^1.11.0",
    "morgan": "~1.6.1",
    "multer": "^1.1.0",
    "serve-favicon": "~2.3.0",
    "iniparser": "*",
    "kerberos": "~0.0.17",
    "mongoose": "*",
    "response-time": "*"
  }
}




signup.jade 파일 정의

설명을 위하여 Express의 view template을 jade로 정하였습니다. 물론 ejs나 hogan 템플릿 등 어느 view template을 정하여도 무방합니다.

{EXPRESS_APP_ROOT}/views/signup.jade

html head title #{title} link(rel='stylesheet', href='/stylesheets/style.css') body h1 #{title} p Enter your name and email address to become a member. form(action='/signup', method='post', enctype='multipart/form-data') div label Name   input(type='text', name='name') br div label Email   input(type='text', name='email') br div label Profile Image   input(type='file', name='profile_image', accept="image/*") br div input(type='submit')

위와 같이 정의할 경우 다음과 같이 화면이 구성될 것입니다.

form 속성을 살펴보도록 하겠습니다.

form(action='/signup', method='post', enctype='multipart/form-data')

action은 submit을 할 때 일으킬 URL 경로이며, method는 HTTP 방식을 의미하는데 POST 방식으로 데이터를 전송하는 것을 의미합니다.

enctype을 multipart/form-data로 정의하는 것은 파일 업로드에 필수 사항입니다.

input(type='file', name='profile_image', accept="image/*")

위는 input 속성을 정의한 것인데, type을 file로 정의하고, accept는 image 파일 필터링을 의미합니다.

특히, name은 데이터 전송 시 JavaScript에서 처리할 수 있도록 데이터를 바인딩하는 역할을 합니다. 

profile_image로 정의된 것을 기억하기 바랍니다.

app.js 코드 추가

app.js에 추가할 코드는 비교적 간단하다. Router 정의가 전부입니다. 추가된 코드를 빨간색으로 표시하였습니다.

{EXPRESS_APP_ROOT}/app.js

... var signup = require('./routes/signup') ... app.use('/signup', signup); ...

전체적인 이해를 돕기 위하여 app.js 예를 아래와 같이 삽입하였습니다.

app.js 예

var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes/index'); var users = require('./routes/users'); var signup = require('./routes/signup') var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); // uncomment after placing your favicon in /public app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes); app.use('/users', users); app.use('/signup', signup); // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app; ////////////////////////////////////////////////////// // ------- creates Server ------- // port setup app.set('port', process.env.PORT || 3000); var server = app.listen(app.get('port'), function() { console.log('Express server listening on port ' + server.address().port); });

JavaScript 파일 정의 

다음의 경로 JavaScript 파일을 정의합니다.

{EXPRESS_APP_ROOT}/routes/signup.js

var express = require('express'); var multer = require('multer'); var router = express.Router(); var multer_settings = multer({ dest: './public/uploads/' }); router.get('/', function(req, res, next) { res.render('signup', { title: 'Signup' }); }); router.post('/', multer_settings.single('profile_image'), function(req, res, next) { var name = req.body.name; var email = req.body.email; console.log(req.body); //form fields if (req.file) { var img_name = "./uploads/" + req.file.filename; console.log(req.file); //form files res.render('profile', { title: 'Profile', name: name, email: email, imagename: img_name }); } res.status(204).end(); }); module.exports = router;

코드를 살펴보겠습니다.

var multer = require('multer');

위의 코드는 multer 미들웨어를 로딩한 것입니다.

var multer_settings = multer({
  dest: './public/uploads/'
});




위의 코드는 multer에 대한 환경설정을 multer_settings라는 변수에 저장한 것입니다.

업로드 되는 파일이 저장되는 경로를 {EXPRESS_APP_ROOT}/public/uploads/ 설정하였습니다.

파일의 size 제한, 경로, encoding 등 다양한 설정이 가능하며, multer Github 페이지에서 자세한 내용을 확인할 수 있습니다.

router.post('/', multer_settings.single('profile_image'), function(req,res) {
  console.log(req.body); //form fields
  console.log(req.file); //form files

  res.status(204).end();
});

위의 코드는 파일 업로드의 해당 input에 대한 데이터 바인딩을 하고 console에 정보를 표시하도록 합니다.

profile.jade 파일 정의

name, email을 입력하고 profile image를 업로드한 후 [submit] 버튼을 클릭하면, 입력된 정보가 표시되는 Profile 페이지를 만들어 보겠습니다.

{EXPRESS_APP_ROOT}/views/profile.jade

html head title #{title} link(rel='stylesheet', href='/stylesheets/style.css') body h1 Profile p Name: #{name} p Email: #{email} img(src='#{imagename}', width='30%')

Result

이제 Terminal에서 node app.js 명령을 입력하여 서버를 실행합니다.

웹 브라우저에서 해당 URL을 입력하고, 정보를 입력하였습니다.

[Submit] 버튼을 클릭한 후, Terminal에 기록된 정보를 살펴보도록 합니다.

Form의 데이터 필드 및 업로드 된 파일에 대한 정보를 볼 수 있습니다.

해당 경로에 파일이 업로드 되었는지 확인해 보도록 합니다.

만약 본 튜토리얼에서 설정된 파일 업로드 경로와 동일하다면, {EXPRESS_APP_ROOT}/public/uploads/ 경로에 파일이 존재해야 합니다.

유의할 것은, 파일명일 굉장히 길고 암호같은 이름으로 변경되어 있는 것을 확인할 수 있을 것입니다.

이는, 여러 곳에서 동일한 이름의 파일이 업로드 되는 경우 중복 방지를 위한 것이며, multer가 제공하는 rename 명령을 통해 이름 및 경로 변경이 가능합니다.

표시되는 profile 페이지의 예는 다음과 같습니다.

이로써 Express 4.x에서 HTTP POST 방식으로 데이터와 파일을 전송하는 방법에 대하여 알아보았습니다.