생활코딩_Node.js) 파일업로드

이번 강의에서는 간단하게 파일 업로드를 하는 방법에 대해서 배웠다.

const express = require('express');

const bodyParser = require('body-parser');

// multer 모듈 추가

const multer = require('multer');

// multer 모듈을 통해 미들웨어를 리턴해주고 upload에 할당

// dest는 destination의 줄임말로 경로 설정을 한다

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

const app = express();

app.locals.pretty = true;

app.set('view engine', 'jade');

app.set('views', './views');

app.use(express.static('public'));

app.get('/upload_test', function(req, res){

res.render('upload');

});

// upload.single('avatar')는 upload라는 미들웨어가 해당 요청에서

// callback 함수 전에 실행되도록 한다는 것이고

// 사용자가 보낸 데이터에 파일이 있으면 request 객체에 file이라는 property를

// 추가하도록 하는 기능을 한다

// 즉, upload.single('userfile')라는 파라미터의 존재가

// 콜백 함수의 req에 file이 들어가 있도록 해준다

// input tag의 name과 동일하게 맞춤

app.post('/upload_file', upload.single('userfile'), function(req, res){

console.log(req.file);

res.send('file name : ' + req.file.originalname);

});

app.listen(3000, function(){

console.log('Connected 3000 port!')

});

1. 모듈 추가

// multer 모듈 추가

const multer = require('multer');

// multer 모듈을 통해 미들웨어를 리턴해주고 upload에 할당

// dest는 destination의 줄임말로 경로 설정을 한다

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

2. 업로드 폼 라우팅 설정 및 페이지 생성

app.get('/upload_test', function(req, res){

res.render('upload');

});

html

head

body

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

input(type='file' name='userfile')

br

input(type='submit')

3. 데이터 받아서 처리할 함수 설정

// upload.single('avatar')는 upload라는 미들웨어가 해당 요청에서

// callback 함수 전에 실행되도록 한다는 것이고

// 사용자가 보낸 데이터에 파일이 있으면 request 객체에 file이라는 property를

// 추가하도록 하는 기능을 한다

// 즉, upload.single('userfile')라는 파라미터의 존재가

// 콜백 함수의 req에 file이 들어가 있도록 해준다

// input tag의 name과 동일하게 맞춤

app.post('/upload_file', upload.single('userfile'), function(req, res){

console.log(req.file);

res.send('file name : ' + req.file.originalname);

});

- console.log(req.file)에서 콘솔에 file에 관한 대략적인 정보들이 json 형식으로 찍힌다