본문 바로가기
Nodejs

[Node.js]Multer를 이용한 다중 이미지 업로드

by teamnova 2023. 9. 24.
728x90

Node.js에서 파일 업로드를 쉽게 처리하기 위해 multer라는 미들웨어를 사용합니다. 이 글에서는 multer를 사용하여 다중 이미지를 업로드하는 방법을 알아보겠습니다.

 

Multer 란?

multer는 Node.js의 미들웨어로서, multipart/form-data를 사용하여 업로드된 파일을 처리하기 위한 라이브러리입니다. 주로 이미지, 동영상 등의 미디어 파일 업로드에 활용되며, Express와 함께 사용하기 적합하게 설계되었습니다.

 

1. 필요한 패키지 설치

npm install express multer ejs

2. 서버 코드 작성

// 필요한 모듈들을 불러옵니다.
const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();

// ejs를 사용하기 위한 설정입니다.
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// 정적 파일 제공 설정. uploads와 public 디렉토리에 있는 파일들을 제공합니다.
app.use('/uploads', express.static('uploads'));
app.use(express.static(path.join(__dirname, 'public')));

// Multer의 저장소 설정. 파일이 어디에 저장되고 이름이 어떻게 지어질지를 정의합니다.
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        // 파일이 저장될 디렉토리를 지정합니다.
        cb(null, 'uploads/');
    },
    filename: (req, file, cb) => {
        // 저장될 파일의 이름을 정의합니다.
        cb(null, Date.now() + '-' + file.originalname);
    },
});

// multer 인스턴스 생성
const upload = multer({ storage: storage });

// 홈 라우트: 업로드 폼을 제공
app.get('/', (req, res) => {
    res.render('index');
});

// 이미지 업로드 처리 라우트. 
// upload.array는 여러 파일을 동시에 업로드할 때 사용합니다.
app.post('/uploadMultiple', upload.array('images', 10), (req, res) => {
    try {
        // 파일 정보를 반환합니다.
        res.send(req.files);
    } catch (error) {
        console.log(error);
        res.status(400).send("Error uploading files.");
    }
});

// 서버 시작
app.listen(3000, () => {
    console.log('Server started on http://localhost:3000');
});

 

3. 테스트를 위한 클라이언트 코드 작성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Multer Multiple Image Upload</title>
  </head>
  <body>
    <form
      ref="uploadForm"
      id="uploadForm"
      action="/uploadMultiple"
      method="post"
      encType="multipart/form-data"
    >
      <input type="file" name="images" multiple />
      <input type="submit" value="Upload!" />
    </form>
  </body>
</html>