[node.js] multer를 이용한 파일 업로드 구현하기

What is Multer?

Multer는 파일 업로드를 위해 사용되는 multipart/form-data 를 다루기 위한 NodeJS의 미들웨어이다.

Multer는 단일 및 다중 파일 업로드 모두를 지원해주기 때문에 node에서 파일 업로드 기능을 구현할 때 많이 사용되고 있다.

개발 환경 설정하기

• npm install multer --save
• npm install express --save

multer 패키지를 설치하고 개발 환경으로 express를 사용하기 위해 해당 패키지를 설치했다.

example code

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('connecting server: http://localhost:' + 3000);
  });

서버가 실행되면 listen()을 실행하게 된다.

이 때 uploads라는 폴더가 존재하지 않으면 현재 디렉토리에 해당 폴더를 생성한다.

// storage setting for file
const storage = multer.diskStorage({
    destination:  (req, file, cb) => {
      cb(null, 'uploads/')
    },
    filename:  (req, file, cb) => {
      cb(null, Date.now() + '-' + file.originalname)// 파일 원본이름 저장
    }
  })

const upload = multer({ storage: storage }); // 미들웨어 생성

해당 코드는 업로드 할 파일을 어디에 저장할 지 지정해주는 부분이다. diskStorage를 통해서 사용자의 디스크 내에 저장할 것을 명시했다.

그리고 파일 저장 경로를 지정할 때에는 destination을 이용하고 그 경로를 uploads/로 지정해주어 uploads 폴더안에 저장할 것을 정의했다.

 

filename은 저장할 파일의 이름을 명시해주는 부분이다. 필자는 업로드 될 때 시간과 파일의 원본 이름을 합쳐서 저장했다.

 

마지막으로 upload 변수는 저장할 파일의 이름을 유지시키는 미들웨어 변수이다. 위와 같이 storage: 로 정의하면 파일명을 유지하며 파일을 관리할 수 있다.

---

이제 POST 요청을 통해서 파일을 어떻게 업로드 하는지 알아보고자 한다.

// 단일 파일 업로드
app.post('/', upload.single('img'), (req, res, next) => {
    res.status(201).send({
        message: "이미지 저장 성공",
        fileInfo: req.file
    })
});

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

    // console check
    req.files.map((data) => {
        console.log(data);
    });
    
    res.status(201).send({
        message: "이미지 저장 성공",
        fileInfo: req.files
    })
});

단일 파일 업로드 결과

포스트맨을 이용하여 localhost:3000 경로에 위와 같이 POST 요청을 보낸다.
이 때 KEY 의 값은 파일 업로드 코드에서 구현한 upload.single('img') 이 부분의 인자 값과 같아야 한다. 요청 결과는 다음과 같다.

요청이 정상적으로 수행된 것을 확인할 수 있다. 또한 uploads 폴더를 확인하면 파일이 생성날짜-파일 이름 형태로 저장된 것을 확인할 수 있을 것이다.

다중 파일 업로드 결과

다중 파일 업로드는 localhost:3000/multipart 경로로 요청한다.

파일 하나를 더 추가했고 그 때 KEY값은 img로 통일했다.
요청 시 결과는 다음과 같다.