[API] nodejs 파일 업로드 모듈

[필수적으로 먼저 봐야할 게시글]

- [node.js] 모듈, 미들웨어 개념 : http://jinbroing.tistory.com/126

[express 파일 업로드 기능 및 특징]

- express는 파일 업로드 기능을 제공하지않음 : 리얼 틀 제공(최소한의 구조), 써드파티 미들웨어(모듈)와 express 조합 

- multer : express와 함께 사용하는 파일 업로드 기능(써드파티 미들웨어) 제공 모듈

[express 프로젝트 multer require 시키기]

1) npm install --save multer : multer 모듈을 다운로드 받아 프로젝트 모듈 관리자에서 관리할 수 있도록 추가하기

- express 프로젝트 내 package.json 파일 확인해보면 multer가 추가된 것을 볼 수 있음

2) /uploads 라우트 파일에 multer 모듈 require 시키기 : 특정 라우트에서만 사용할 것이기때문에(코드 지저분해지지않도록)

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

- dest : 업로드하려는 파일을 저장할 위치를 지정하는 객체 프로퍼티

- 디렉토리를 만들어놔야함

[파일 전송 기능 만들기]

1) 파일을 서버로 전송하기위해 파일을 찾아오고 파일을 보낼 수 있는 폼 만들기

1-1) ejs 뷰 디렉토리에 뷰 파일 만들기(./views/ .ejs)

<form action="/uploads" method="post" enctype="multipart/form-data">
      <input type="file" name="user_file" />
      <input type="submit" value="전송" />
</form>

- action : 파일 업로딩(업로드 페이지 아님) 처리를 할 액션(라우트)과 연결

- method : HTTP 메서드 지정, 겉의 주소는 그대로지만 업로드 페이지와 파일 업로딩 액션을 나누기위해 사용

- 폼을 만들 때 action, method 이외 파일 전송을 위해선 enctype 속성을 지정해줘야함

- enctype : 폼을 전송할 때 사용할 인코딩 방법을 지정

1) application/x-www-form-urlencoded : 모든 문자를 인코딩(기본값)

2) multipart/form-data : 어떠한 문자는 인코딩도 안함, 주로 파일 업로드 컨트롤 제공하는 경우 사용

3) text/plain : 공백이 + 문자로 변환, 특수 문자를 인코딩하지않음

1-2) ./routes/uploads.js 라우트 파일 생성 및 수정

- app.js 내 새로 생성한 라우트 파일 require 후 use로 사용 선언하기

- uploads.js 파일 수정

var express = require('express');
var multer = require('multer');
var upload = multer({ dest: "uploads/"});
 
var router = express.Router();
 
router.get('/', function (req, res, next) {
  res.render('uploads', { title: "파일 업로드" });
});
 
router.post('/', upload.single('user_file'), function(req, res, next){
    
});
 

- '/' 부분을 '/upload'로 할 경우 접근 시 http://도메인/upload/upload로 가야함

- 큰 위치에서 세부적인 위치로 갈 때 바로 위처럼 지정(upload 중에서도 어떤 특정 업로드 혹은 관리 등)

- 해당 주소에서만 파일 업로드 기능을 사용할 것이기때문에 파일 단위로 구분해서 require 시키기 : 안 헷갈리기

- router.post 함수의 두번째 인자는 써드파티 미들웨어 : req 객체에 file(업로드한 파일 정보를 저장한 객체) 추가해줌

- upload.single : 미들웨어, 인자로 form의 input(type:file)로 인클루드된 파일의 name 속성값을 넣어줘야함, 그래야 파일에 대한 정보를

- function(req, res, next) : 2번째 미들웨어(파일 처리 관련 - req.file 추가) 처리 후 실행시키는 미들웨어

1-3) app.js : 아래와 같이 라우트 파일 require

var upload = require('./routes/uploads.js');
app.use('/uploads', uploads);
 

- multer 모듈을 래핑한 미들웨어(upload)

[multer 모듈 조금 더 활용하기]

1) multer를 require 시킨 파일로 가기 : ./routes/uploads.js

- 기존: var upload = multer({ dest: "uploads/"}); - multer 모듈을 래핑하기 전 옵션값(객체)으로 업로드 목적지만 설정되어있음

- 변경 코드 : dest(목적지) 설정만 하는 것이 아니라 스토리지 전체에 대한 설정하는 함수에서 리턴받은 객체(결국 설정 객체)

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    if(file.mimetype === 'image/png')
      cb(null, 'uploads/img');
    else if (file.mimetype === 'text/plain')
      cb(null, 'uploads/txt');
    else
      cb(null, 'uploads/etc');
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname + '-' + Date.now())
  }
});

- 미들웨어 함수가 호출되면 multer 함수가 호출, multer 함수가 호출되면 인수로 가진 storage 객체의 destination, filename 호출

- diskStorage 메서드는 객체를 리턴(destination, filename 메서드를 가지는)함

[참고자료]

- 생활코딩, 파일업로드 : https://opentutorials.org/course/2136/11959

- github, multer 모듈 Usage를 중심으로 : https://github.com/expressjs/multer