Node.js 생활코딩 정리 - 파일업로드 준비

파일업로드 준비

 

multer라는 모듈을 설치해보자

 

npm install –save multer

 

 

파일업로드 2: 업로드 폼

 

jade 파일에서 form을 지정할 때 enctype="multipart/form-data"를 반드시 유의하자(파일업로드시에는 필요)

 

 

var express = require('express');//익스프레스를 가져옴

var bodyParser = require('body-parser')

var fs = require('fs');

var app = express();

var multer = require('multer');//업로드를 위한 multer를 가져옴

var upload = multer({dest: 'uploads/'});//uploads라는 폴더가 업로드 폴더임

 

 

app.use(bodyParser.urlencoded({ extended: false }));//body parser를 사용함

app.locals.pretty = true;//템플릿 줄바꿈

app.set('views', './views_file');//템플릿 폴더 위치 표시

app.set('view engine', 'jade');//템플릿 엔진을 jade로 명시함

 

//업로드 폼을 가져옴

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

res.render('upload');

});

 

//실제 업로드를 시키면 post로 옴

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

res.send('Uploaded');

});

upload.jade

 

doctype html

html

head

meta(charset='utf-8')

body

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

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

input(type='submit')

 

 

실행화면

 

 

제출을 누르면

 

 

 

파일 업로드3 multer 사용법

 

req.file 객체 내용

app_file.js

 

var express = require('express');//익스프레스를 가져옴

var bodyParser = require('body-parser')

var fs = require('fs');

var app = express();

var multer = require('multer');//업로드를 위한 multer를 가져옴

var upload = multer({dest: 'uploads/'});//uploads라는 폴더가 업로드 폴더임

 

 

app.use(bodyParser.urlencoded({ extended: false }));//body parser를 사용함

app.locals.pretty = true;//템플릿 줄바꿈

app.set('views', './views_file');//템플릿 폴더 위치 표시

app.set('view engine', 'jade');//템플릿 엔진을 jade로 명시함

 

//업로드 폼을 가져옴

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

res.render('upload');

});

 

//실제 업로드를 시키면 post로 옴

//2번째 파라미터는 사용자가 전송한 데이터에서 파일이 포함되면

//req안에 file이라는 프로퍼티를 추가함 미들웨어임

//userfile은 jade에서 input type='file'의 name값

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

res.send('Uploaded : '+req.file.filename);

});

 

 

upload.jade는 동일

 

실행 화면

 

 

 

파일 업로드4 multer 심화

 

이번에는 업로드된 파일명을 원래 파일명으로 해보자

 

app_file.js

 

var express = require('express');//익스프레스를 가져옴

var bodyParser = require('body-parser')

var fs = require('fs');

var app = express();

var multer = require('multer');//업로드를 위한 multer를 가져옴

var _storage = multer.diskStorage({

destination: function (req, file, cb) {//cb는 callback함수의 약자

//if(파일의 형식이 이미지면)

//이미지 폴더에 저장

//else

//text 폴더에 저장한다 가 가능하게됨

cb(null, 'uploads/')//2번째 인자는 파일이 저장될 인자

},

filename: function (req, file, cb) {//cb는 callback함수의 약자

cb(null, file.originalname)//파일의 이름을 지정함

}

});

 

var upload = multer({ storage: _storage });

 

 

app.use(bodyParser.urlencoded({ extended: false }));//body parser를 사용함

app.locals.pretty = true;//템플릿 줄바꿈

app.set('views', './views_file');//템플릿 폴더 위치 표시

app.set('view engine', 'jade');//템플릿 엔진을 jade로 명시함

app.use('/user', express.static('uploads'));//여기로 폴더에 있는 그림을 접근할 수 있음

 

아래와 같은 가이드를 참고하여 위와 같이 구현 하면 원래 파일명으로 저장 할 수 있다.

 

 

출처 : https://opentutorials.org/course/2136