Express - multer

[ Multer ]

클라이언트(사용자)가 특정 정보(크기가 크거나 보안성이 요구되는 정보)와 함께 요청을 하면 우리는 Post 메서드를 통해 정보를 저장하고 response를 할 수 있게 됩니다. 이번엔 클라이언트가 파일을 보내는 요청을 다뤄보도록 하겠습니다.

요청하는 파일을 그대로 받아서 저장하기 위해서 Multer라는 모듈이 필요합니다.

 node install multer

설치가 끝나면 다른 모듈처럼 multer를 사용하면 됩니다.

//upload file

const multer = require('multer');

const upload = multer({dest:'uploaded_file'});

dest는 destination의 약자로 클라이언트로부터 받은 파일을 저장할 위치를 정해주면 됩니다. (물론 사전에 만들어 놓은 폴더여야 합니다.) 사용자가 페이지에서 파일을 보내야 하므로 파일을 보낼 수 있는 페이지를 만들어야겠죠? URL로 페이지에 접근한 페이지가 보여져야 하므로 Get방식으로 만들어야 합니다.

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

res.render('upload');

})

유저 인터페이스를 위해 upload라는 템플릿 파일을 랜더링 해야하므로 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')

여기서 enctype은 업로드 된 파일을 서버로 보내기 위한 작업입니다.

form의 작업들은 '/upload' 중에서 post방식으로 작동되는 라우터를 통해 작동되므로 post 라우터를 만들어줍니다.

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

console.log(req.file);

res.send('uploaded!!' + req.file);

})

'upload.single'이라는 parameter가 보이는데요. file의 정보를 가져와서 request 메서드에 file이라는 객체를 추가해 사용할 수 있게끔 해줍니다. 즉, file의 정보를 handling 할 수 있게 해줍니다.

파일이름이나 경로와 같은 자세한 업로드 옵션을 설정하려면 

https://github.com/expressjs/multer/blob/master/doc/README-ko.md에서 storage부분을 참고하면 됩니다.(dest 대신 storage 사용)