[File] File Upload Process

Node.js로 파일 업로드 이해하기

파일업로드 과정을 node.js로 구현하기

// index.js
const express = require('express');
const app = express();
const fs = require('fs'); // 1

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

// Routes
app.use('/', require('./routes/main'));

// Port setting
const port = 3000;
app.listen(port, function(){
  var dir = './uploadedFiles';
  if (!fs.existsSync(dir)) fs.mkdirSync(dir); // 2

  console.log('server on! http://localhost:'+port);
});

1. fs는 node.js에 내장된 모듈 File System의 약자
   서버의 파일과 폴더에 접근이 가능한 함수들이 들어있다.
2. fs.existsSync()함수로 폴더가 존재하는지 확인후, 없다면 fs.mkdirSync()로 폴더를 생성한다.

// routers/main.js

const express  = require('express');
const router   = express.Router();
const multer = require('multer'); // 1

const storage  = multer.diskStorage({ // 2
  destination(req, file, cb) {
    cb(null, 'uploadedFiles/');
  },
  filename(req, file, cb) {
    cb(null, `${Date.now()}__${file.originalname}`);
  },
});
const upload = multer({ dest: 'uploadedFiles/' }); // 3-1
const uploadWithOriginalFilename = multer({ storage: storage }); // 3-2

router.get('/', function(req,res){
  res.render('upload');
});

router.post('/uploadFile', upload.single('attachment'), function(req,res){ // 4 
  res.render('confirmation', { file:req.file, files:null });
});

router.post('/uploadFileWithOriginalFilename', uploadWithOriginalFilename.single('attachment'), function(req,res){ // 5
  res.render('confirmation', { file:req.file, files:null });
});

router.post('/uploadFiles', upload.array('attachments'), function(req,res){ // 6
  res.render('confirmation', { file: null, files:req.files} );
});

router.post('/uploadFilesWithOriginalFilename', uploadWithOriginalFilename.array('attachments'), function(req,res){ // 7
  res.render('confirmation', { file:null, files:req.files });
});

module.exports = router;

1. multer를 불러온다
2. 업로드한 파일의 이름을 세팅한다 (파일 앞에 시간을 정수로 달아줘 구별할수있도록 함)
3. multer로 저장될취이를 설정
   3.1 저장될 파일의 이름을 유지할 미들웨어
4. 하나의 파일 업로드를 처리하는 라우터
5. 변경된 설정으로 하나의 파일을 처리하는 라우터
6. 여러개의 파일업로드를 처리하는 라우터 (array)를 사용해 처리했다.
7. 변경된 설정으로 여러개의 파일 업로드를 처리한다. 위와 동일하게 array를 사용,

참고한곳
express-multer