Node.js Multer를 이용한 파일 업로드

Multer란?

Multer는 파일 업로드를 위해 사용되는 Node.js의 미들웨어입니다.

multipart/form-data 형식으로 단일 및 다중 파일 업로드를 지원하기 때문에 가장 많이 사용됩니다.

npm을 통한 multer 설치

npm install --save multer

• https://www.npmjs.com/package/multer
• https://github.com/expressjs/multer/blob/master/doc/README-ko.md (한국어)

multer 쉽게 설치할 수 있습니다. 위 사이트는 공식문서로 활용됩니다. (Local 환경에서 사용할 때는 많은 도움이 됐지만, S3 연결할 때는 별도의 노력이 필요했습니다.)

Multer 실제 예시

const express = require("express");
const app = express();
const multer = require("multer");
const fs = require("fs");

app.listen(3000, () => {
	const dir = "./uploads";
    if(!fs.existsSync(dir)) {
    	fs.mkdirSync(dir);
    }
    console.log("서버 실행");
});

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
});

const upload = multer({ storage: storage })

(https://github.com/expressjs/multer/blob/master/doc/README-ko.md) 참고함
디렉토리가 존재하지 않는 경우 디렉토리를 생성하고 진행됩니다.

파일 저장 경로는 uploads 정의합니다.

이후에는 S3로 경로를 변경합니다.

filename의 경우 중복 저장 방지를 위해 뒷쪽에 Date.now()를 통해 원본 + 시간을 합쳐 저장합니다.

단일 파일 업로드 / 다중 파일 업로드 차이

POST 요청을 통해 파일을 업로드 할 수 있습니다.

중요한 부분은 upload.single('img')에서 img 입니다. 현재 Key값이 img입니다. 따라서 Client에서 Key 값 사용을 img로 해서 전달해야 합니다. 요청이 정상적으로 수행된다면 파일이 uploads 폴더에 저장됩니다.

// 단일 파일 업로드
app.post('/', upload.single('img'), (req, res, next) => {
    res.status(200).send({
        message: "Ok",
        fileInfo: req.file
    })
});

// 다중 파일 업로드
app.post('/multipart', upload.array('img'), (req, res, next) => {

    // console check
    req.files.map((data) => {
        console.log(data);
    });
    
    res.status(200).send({
        message: "Ok",
        fileInfo: req.files
    })
});