본문 바로가기
Nodejs

[Nodejs] Multer을 사용하여 파일 업로드 서버 만들기

by teamnova 2025. 3. 3.
728x90

[vscode / window11에서 코드작성, 테스트 하였습니다]

 

Multer는 Node.js 환경에서 파일 업로드를 처리하기 위한 미들웨어입니다. Express와 함께 사용되며, 파일을 서버에 업로드하고 이를 다루는 데 필요한 기능을 제공합니다. 간단히 말하면, Multer는 사용자가 서버에 파일을 업로드할 때, 그 파일을 처리하고 저장하는 데 도움을 주는 도구

 

미들웨어란? 웹 애플리케이션에서 요청(request)과 응답(response) 사이에서 실행되는 함수입니다. 클라이언트가 요청을 보내면, 서버가 응답을 보내기 전에 여러 작업을 수행할 수 있게 도와주는 중간 단계 역할을 합니다.

 

Multer를 사용하는 이유

  1. 파일 업로드 처리:
    • 기본적으로 HTTP 요청에서는 텍스트 데이터만 처리되므로, 파일 업로드를 위해서는 별도의 처리가 필요합니다.
    • Multer는 이러한 파일 업로드 요청을 처리하여, 파일을 서버의 디스크에 저장하거나 다른 방식으로 다룰 수 있게 도와줍니다.
  2. 다양한 저장 옵션 제공:
    • Multer는 파일을 서버의 디스크, 메모리, Amazon S3와 같은 외부 스토리지로 저장할 수 있는 다양한 옵션을 제공합니다.
    • 사용자 정의 파일 저장 방식도 지원하므로, 프로젝트에 맞는 저장 방법을 설정할 수 있습니다.
  3. 파일 검증:
    • Multer는 파일 업로드 시 파일 크기, 파일 형식 등을 제한할 수 있는 기능을 제공합니다.
    • 이를 통해 사용자가 올바른 파일 형식만 업로드하도록 강제할 수 있습니다.
  4. 파일 메타데이터 처리:
    • 업로드된 파일의 메타데이터(예: 원본 파일명, 파일 크기, MIME 타입 등)를 쉽게 다룰 수 있습니다.
    • 이를 통해 서버 측에서 추가적인 처리가 가능해집니다.

Multer 사용 예시

Multer는 파일 업로드와 관련된 모든 작업에 유용합니다. 몇 가지 사용 사례를 들자면:

  1. 파일 업로드 서비스:
    • 파일을 서버에 업로드하고, 이를 저장하거나 처리하는 웹 애플리케이션 (예: 파일 호스팅, 이미지 업로드 등)
  2. 프로필 사진 업로드:
    • 사용자 프로필에 사진을 업로드하는 기능을 구현할 때, 업로드된 파일을 서버에 저장하거나 클라우드로 전송하는 경우.
  3. 데이터 처리 및 분석:
    • 업로드된 파일을 서버에서 읽고 분석하는 경우 (예: CSV 파일 업로드 후 분석, 이미지 업로드 후 텍스트 추출 등).
  4. 클라우드 파일 저장:
    • Multer는 로컬 디스크뿐만 아니라 Amazon S3와 같은 클라우드 서비스에 파일을 저장하는 기능도 제공합니다. 클라우드 파일 저장 서비스를 구현하려는 경우 유용합니다.

 

먼저 프로젝트 설정을 합니다

터미널에서 명령어 실행

 

mkdir file-upload-server
cd file-upload-server // 다운받을 서버 Multer 저장폴
npm init -y

 

패키지 설치

터미널에서 명령어 실행

 

npm install express multer

설치 완료후 코드 작성

 

-코드-

server.js

const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const port = 3000;

// 파일 저장 위치와 파일명 설정
const storage = multer.diskStorage({
    // 업로드된 파일을 저장할 폴더 설정
    destination: function (req, file, cb) {
        cb(null, './uploads'); // 파일이 저장될 폴더 경로
    },
    // 파일 이름 설정
    filename: function (req, file, cb) {
        // 원래 파일명을 사용하려면 아래 주석을 제거하고 사용
        // const safeFileName = encodeURIComponent(file.originalname);  // URL-safe 인코딩된 파일명 사용
        // cb(null, safeFileName);  // 파일명에 한글이 포함되면 인코딩됩니다.

        // 날짜 기반 파일명을 사용하려면 아래 코드로 설정 (기존대로 날짜로 저장)
        const dateNow = Date.now();  // 현재 시간을 밀리초 단위로 가져오기
        const extension = path.extname(file.originalname);  // 파일 확장자 추출
        cb(null, `${dateNow}${extension}`);  // 밀리초 기준의 날짜와 확장자를 사용한 파일명
    }
});

// Multer 설정 (파일 업로드 처리)
const upload = multer({ storage: storage });

// HTML 파일 업로드 폼 제공
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');  // 업로드 폼 HTML 파일 제공
});

// 파일 업로드 경로
app.post('/upload', upload.single('file'), (req, res) => {
    // 업로드가 성공했으면, 업로드된 파일의 이름을 사용자에게 보여줌
    if (req.file) {
        // 파일명이 URL-safe 형식으로 저장되었으므로, 디코딩 처리
        const decodedFileName = decodeURIComponent(req.file.filename);  // URL 디코딩
        res.send(`파일이 성공적으로 업로드되었습니다: ${decodedFileName}`);
    } else {
        res.send('파일 업로드 실패');  // 파일이 업로드되지 않으면 실패 메시지 반환
    }
});

// 서버 실행
app.listen(port, () => {
    console.log(`서버가 http://localhost:${port} 에서 실행 중입니다.`);
});

 

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>파일 업로드</title>
</head>
<body>
  <h1>파일 업로드</h1>
  <form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" required>
    <button type="submit">파일 업로드</button>
  </form>
</body>
</html>

 

터미널에서 명령어 실행

node server.js 

 

시연영상

 

 

 

'Nodejs' 카테고리의 다른 글

[Node.js] Socket.IO를 사용한 웹 채팅 만들기  (2) 2025.02.24
[Nodejs]moment 모듈 활용 예시 만들기  (0) 2025.02.07
[Nodejs] 웹 스크래핑을 활용한 네이버 뉴스 헤드라인 텍스트 추출  (2) 2025.02.03
[Nodejs] sha256 사용해 해시값 생성하기  (0) 2025.01.24
[Nodejs] 간단한 REST API 서버 만들기  (0) 2025.01.20

관련글

티스토리툴바