Node.js 기초 <13. 파일 업로드와 이미지 처리 (multer 활용)>

노드 Node.js

13. 파일 업로드와 이미지 처리 (multer 활용) 

 

안녕하세요! 태마입니다.

Node.js 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

노드 Node.js

포스팅 시작하겠습니다 :)

 

---

 

1. 주제 간단 정리

 

1. Node.js에서 파일 업로드가 필요한 이유

웹 애플리케이션에서는 이미지, 문서, 동영상 등 다양한 파일을 업로드해야 하는 경우가 많습니다.
Node.js에서는 multer와 같은 미들웨어를 사용하여 파일을 쉽게 업로드할 수 있습니다.

📌 파일 업로드가 필요한 경우
✔ 프로필 사진 업로드 → 사용자 계정 이미지 관리
✔ 문서 업로드 → PDF, Excel, Word 파일 저장
✔ 멀티미디어 콘텐츠 관리 → 동영상, 오디오 파일 저장

---

 

2. 파일 업로드 방식 비교 (Base64 vs Form-Data)

✅ 1) Base64 인코딩 방식
✔ 파일을 **문자열로 변환(Base64)**하여 JSON 데이터와 함께 전송
✔ 데이터베이스에 저장 가능하지만 파일 크기가 커지면 비효율적

✅ 2) Form-Data 방식 (multipart/form-data)
✔ 파일을 직접 업로드하고 서버에서 저장
✔ 웹 애플리케이션에서 가장 많이 사용되는 방식

📌 일반적으로 Form-Data 방식을 사용하여 파일을 업로드함!

✅ 여기까지 파일 업로드의 개념과 방식을 배웠습니다!
👉 "그렇다면, Express에서 파일 업로드를 어떻게 구현할까?"
✅ 2부에서 multer를 활용한 파일 업로드 방법을 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. multer를 이용한 파일 업로드 설정

✅ 1) multer 패키지 설치

npm install multer

✅ 2) 기본 파일 업로드 설정

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

const app = express();
const upload = multer({ dest: "uploads/" }); // 업로드된 파일 저장 경로

app.post("/upload", upload.single("file"), (req, res) => {
  res.send(`파일 업로드 성공: ${req.file.filename}`);
});

app.listen(3000, () => console.log("서버 실행 중 (포트 3000)"));

📌 업로드된 파일은 uploads/ 폴더에 저장됨!

✅ 3) 업로드 테스트 (Postman 사용)

• POST 요청: http://localhost:3000/upload
• Body → form-data 선택
• Key: "file" → 파일 선택 후 업로드

📌 파일을 업로드하면 서버에서 파일을 저장하고 응답을 반환!

---

 

2. 파일 저장 방식 설정 (디스크 저장 vs 메모리 저장)

✅ 1) 디스크에 저장 (multer.diskStorage())

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 });

📌 업로드된 파일의 이름을 날짜 기반으로 변경하여 저장 가능!

✅ 2) 메모리에 저장 (multer.memoryStorage())

const upload = multer({ storage: multer.memoryStorage() });

📌 파일을 메모리에 저장하고, 클라우드 저장소(S3, Firebase) 등에 전송할 때 사용!

---

 

3. 여러 개의 파일 업로드 (multiple, array)

✅ 1) 다중 파일 업로드 (array)

app.post("/upload-multiple", upload.array("files", 5), (req, res) => {
  res.send(`업로드된 파일 개수: ${req.files.length}`);
});

📌 한 번에 여러 개의 파일을 업로드 가능 (max: 5 설정)

✅ 2) 여러 필드에서 파일 업로드 (fields)

app.post("/upload-fields", upload.fields([
  { name: "profile", maxCount: 1 },
  { name: "documents", maxCount: 2 }
]), (req, res) => {
  res.send("다중 필드 파일 업로드 성공!");
});

📌 profile은 1개, documents는 2개까지 업로드 가능!

---

 

4. 파일 타입 및 크기 제한 설정

✅ 1) 파일 확장자 제한 (이미지 파일만 허용)

const fileFilter = (req, file, cb) => {
  if (file.mimetype.startsWith("image/")) {
    cb(null, true);
  } else {
    cb(new Error("이미지 파일만 업로드 가능합니다!"), false);
  }
};

const upload = multer({ storage, fileFilter });

📌 이미지 파일(image/png, image/jpg 등)만 허용하도록 설정 가능!

✅ 2) 파일 크기 제한 (최대 5MB 설정)

const upload = multer({
  storage,
  limits: { fileSize: 5 * 1024 * 1024 } // 5MB 제한
});

📌 파일 크기가 5MB를 초과하면 업로드가 제한됨!

---

 

5. 업로드된 파일 관리 및 삭제

✅ 1) 업로드된 파일 정보 조회

app.get("/uploads/:filename", (req, res) => {
  res.sendFile(__dirname + `/uploads/${req.params.filename}`);
});

📌 업로드된 파일을 URL을 통해 조회할 수 있음!

✅ 2) 업로드된 파일 삭제 (fs.unlink())

const fs = require("fs");

app.delete("/uploads/:filename", (req, res) => {
  fs.unlink(`uploads/${req.params.filename}`, (err) => {
    if (err) return res.status(500).send("파일 삭제 실패!");
    res.send("파일 삭제 완료!");
  });
});

📌 파일을 삭제할 수 있도록 API 제공!

---

✅ 여기까지 multer를 활용한 파일 업로드와 이미지 처리 방법을 배웠습니다!
👉 "그렇다면, 업로드한 파일을 클라우드 스토리지(AWS S3, Firebase)에 저장하려면?"
✅ 다음 회차에서 클라우드 스토리지와 파일 업로드 연동 방법을 배워봅시다!