7. 파일 업로드 (multer 모듈 이용)

파일을 업로드 하는 작업은 매우 기본적 이면서도 중요한 기능이다. 이번 챕터에서는 가장 기본적인 업로드 기능을 구현 해볼 것이다.

일단 시작하기에 앞서서 multer 모듈을 install해준다.

$ npm install --save multer

일단 간단하게 이러한 form을 만들어서 실습을 해보겠다. 

upload.pug

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')
 

다른건 둘째치고 form 태그를 보면 form 태그의 post 메소드 실행 시에 upload 라는 라우터로 데이터를 전송하겠다는 뜻인데 파일 전송 시 enctype 부분을 꼭 작성해주어야 한다고 한다. 그냥 알아둬야겠다.

이제 파일을 전송할 라우터와 post된 정보를 출력해보는 코드를 node에서 작성해보겠다.

multer 공식 사이트에 가면 나와있는 기본 폼이 있다.

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })
 
var app = express()
 
app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})
 
app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files is array of `photos` files
  // req.body will contain the text fields, if there were any
})
 
var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
  // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
  //
  // e.g.
  //  req.files['avatar'][0] -> File
  //  req.files['gallery'] -> Array
  //
  // req.body will contain the text fields, if there were any
})

multer 변수에 모듈을 require해서 객체를 리턴받고 해당 변수로 파일 업로드에 관한 작업을 한다.

그리고 multer의 기본 설정을 하는 코드로 

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

를 작성하여 파일이 저장되는 디렉토리를 uploads라는 디렉토리로 하겠다고 선언해준다.(uploads 라는 폴더를 생성해줘야 한다.)

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})

보통 우리가 app.post 부분을 작성할 때 라우터 주소와 function 이 두개로 작성되는 것이 대부분이었는데 보면 중간에 매개변수 하나가 더 포함되어있는 것을 볼 수 있다. post 메소드를 통해 해당 라우터에 들어오게 되면 function이 실행되기 전에 두 번째 매개변수의 작업이 먼저 실행되게 된다. 

upload.single('avatar')에서 avatar 라고하는 것은 폼 작성 시에 file의 name 값이다. 나는 userfile 이라고 name값을 작성하였으므로 userfile을 써주면 된다.

이게 가장 기본적인 사용법인데 조금 더 심화된 방법이 있다. 내가 봤을 때는 그게 더 효율적인 것 같아서 내 코드는 그 방법으로 작성해보았다.

app.js

var express = require('express');
var app = express();
var multer = require('multer');
var _storage = multer.diskStorage({
    destination: function(req,file,cb) {
        cb(null,'uploads/')
    },
    filename: function(req,file,cb) {
        cb(null,file.originalname)
    }
})
var upload = multer({storage: _storage}) //미들웨어 리턴. 사용자가 업로드한 파일을 어디에 저장할 것인지 설정
app.set('view engine','pug');
app.set('views','./views');
app.use(express.static('public'));
app.use('/user',express.static('uploads'));
app.get('/upload',function(req,res){
    res.render('upload');
});
app.post('/upload',upload.single('userfile'),function(req,res){
    res.send('uploaded :'+req.file.originalname);
    console.log(req.file);    
})
app.listen(3000, function() {
    console.log('Connected 3000 port!');
});
 

storage 라는 부분인데 callback 함수의 형식으로 여러가지 설정들을 해줄 수 있다.

var multer = require('multer');

var _storage = multer.diskStorage({

    destination: function(req,file,cb) {

        cb(null,'uploads/')

    },

    filename: function(req,file,cb) {

        cb(null,file.originalname)

    }

})

var upload = multer({storage: _storage})

아까는 upload 변수에 바로 upload 할 디렉토리를 바로 결정해 주었다면 이번엔 변수 값으로 지정해주고 있다.

해당 변수 값은 디렉토리, 파일이름 등 여러가지를 원하는 조건으로 작성되게 할 수 있다.

업로드될 파일의 경로를 정할 때는 destination 이라는 함수를 통해서 정해지게 되는데 uploads라는 디렉토리를 향하도록 한다.

파일 이름은 filename 옵션 중에 하나인 originalname (사용자가 업로드한 파일명을 그대로 따라감) 을 사용하여 파일명을 저장하도록 한다.

이 방법을 더 선호하는 이유는 파일을 서버로 업로드 할 때 text 파일은 text 파일대로, image 파일은 image 파일대로 각각의 디렉토리를 지정하여 업로드 할 수 있기 때문이다. 예를들면

destination: function(req,file,cb) {

   if(사용자가 업로드 한 파일이 text 형식이라면)     

cb(null,'text/')

else if(사용자가 업로드 한 파일이 image 형식이라면)

cb(null,'image/')

    },

와 같이 사용될 수도 있기 때문이다. 더 많은 기능이 있겠지만 가장 기본적인 기능만 우선적으로 배워봤다.

파일 업로드 기능을 활용할 일이 생기면 더 심화시켜서 공부 해볼 필요가 있겠다.