18강. 파일 업로드(File Upload)
이번 강의에서는 multer를 사용해 이미지와 파일을 서버에 업로드하는 방법을 배웁니다.
1. 파일 업로드란?
사용자가 선택한 파일을 서버 폴더에 저장하는 기능입니다.
사용자
↓
이미지 선택
↓
서버 전송
↓
uploads 폴더 저장
↓
DB에 파일명 저장
2. multer 설치
npm install multer
3. 프로젝트 구조
project
│
├── app.js
├── package.json
│
├── uploads
│
└── views
└── upload.html
4. uploads 폴더 만들기
mkdir uploads
업로드된 파일이 저장되는 공간입니다.
5. 기본 설정
const express = require("express");
const multer = require("multer");
const path = require("path");
const app = express();
app.use("/uploads", express.static("uploads"));
6. 저장 위치 설정
const storage = multer.diskStorage({
destination: function(req, file, cb){
cb(null, "uploads/");
},
filename: function(req, file, cb){
cb(null, Date.now() + path.extname(file.originalname));
}
});
const upload = multer({ storage: storage });
7. 업로드 폼 만들기
views/upload.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>파일 업로드</title>
</head>
<body>
<h1>파일 업로드</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="photo">
<button>업로드</button>
</form>
</body>
</html>
핵심은 이것입니다.
enctype="multipart/form-data"
8. 업로드 페이지 출력
app.get("/upload", (req, res) => {
res.sendFile(path.join(__dirname, "views", "upload.html"));
});
9. 단일 파일 업로드
app.post("/upload", upload.single("photo"), (req, res) => {
console.log(req.file);
res.send("업로드 완료");
});
photo는 input의 name과 같아야 합니다.
<input type="file" name="photo">
10. 업로드 결과 확인
업로드 후 uploads 폴더에 파일이 저장됩니다.
uploads
│
└── 1719384923000.jpg
11. 업로드된 이미지 출력
app.post("/upload", upload.single("photo"), (req, res) => {
res.send(`
<h1>업로드 완료</h1>
<img src="/uploads/${req.file.filename}" width="300">
`);
});
12. 여러 파일 업로드
HTML
<form action="/multi-upload" method="POST" enctype="multipart/form-data">
<input type="file" name="photos" multiple>
<button>여러 파일 업로드</button>
</form>
Node.js
app.post("/multi-upload", upload.array("photos", 5), (req, res) => {
console.log(req.files);
res.send("여러 파일 업로드 완료");
});
최대 5개까지 업로드됩니다.
13. 파일 확장자 제한
const fileFilter = (req, file, cb) => {
const allowed = ["image/jpeg", "image/png", "image/gif"];
if(allowed.includes(file.mimetype)){
cb(null, true);
}else{
cb(null, false);
}
};
const upload = multer({
storage: storage,
fileFilter: fileFilter
});
14. 파일 용량 제한
const upload = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 5
}
});
5MB까지 업로드 허용입니다.
15. 게시판 이미지 업로드 예시
게시글 작성 시 이미지도 함께 저장합니다.
HTML
<form action="/board/write" method="POST" enctype="multipart/form-data">
<input type="text" name="title" placeholder="제목">
<textarea name="content" placeholder="내용"></textarea>
<input type="file" name="image">
<button>등록</button>
</form>
Node.js
app.post("/board/write", upload.single("image"), (req, res) => {
const title = req.body.title;
const content = req.body.content;
const image = req.file.filename;
res.json({
title,
content,
image
});
});
16. MySQL에 파일명 저장
app.post("/board/write", upload.single("image"), (req, res) => {
const { title, content } = req.body;
const image = req.file ? req.file.filename : null;
const sql = "INSERT INTO board(title, content, image) VALUES(?,?,?)";
db.query(sql, [title, content, image], (err, result) => {
if(err){
return res.status(500).send("DB 오류");
}
res.send("게시글 등록 완료");
});
});
테이블에 image 컬럼이 필요합니다.
ALTER TABLE board ADD image VARCHAR(255);
17. 전체 예제 app.js
const express = require("express");
const multer = require("multer");
const path = require("path");
const app = express();
app.use(express.urlencoded({ extended: true }));
app.use("/uploads", express.static("uploads"));
const storage = multer.diskStorage({
destination: function(req, file, cb){
cb(null, "uploads/");
},
filename: function(req, file, cb){
cb(null, Date.now() + path.extname(file.originalname));
}
});
const upload = multer({ storage: storage });
app.get("/upload", (req, res) => {
res.sendFile(path.join(__dirname, "views", "upload.html"));
});
app.post("/upload", upload.single("photo"), (req, res) => {
res.send(`
<h1>업로드 완료</h1>
<img src="/uploads/${req.file.filename}" width="300">
`);
});
app.listen(3000, () => {
console.log("Server Running");
});
18. 실습 1
프로필 이미지 업로드
<input type="file" name="profile">
app.post("/profile", upload.single("profile"), (req, res) => {
res.send(req.file.filename);
});
19. 실습 2
갤러리 이미지 여러 개 업로드
app.post("/gallery", upload.array("photos", 10), (req, res) => {
res.json(req.files);
});
20. 이번 강의 핵심 정리
문법 설명
multer 파일 업로드 패키지
diskStorage() 저장 위치와 파일명 설정
destination 저장 폴더
filename 저장 파일명
upload.single() 단일 파일 업로드
upload.array() 여러 파일 업로드
req.file 단일 파일 정보
req.files 여러 파일 정보
express.static() 업로드 파일 출력
이번 강의에서는 multer를 사용해 이미지와 파일을 서버에 업로드하는 방법을 배웁니다.
1. 파일 업로드란?
사용자가 선택한 파일을 서버 폴더에 저장하는 기능입니다.
사용자
↓
이미지 선택
↓
서버 전송
↓
uploads 폴더 저장
↓
DB에 파일명 저장
2. multer 설치
npm install multer
3. 프로젝트 구조
project
│
├── app.js
├── package.json
│
├── uploads
│
└── views
└── upload.html
4. uploads 폴더 만들기
mkdir uploads
업로드된 파일이 저장되는 공간입니다.
5. 기본 설정
const express = require("express");
const multer = require("multer");
const path = require("path");
const app = express();
app.use("/uploads", express.static("uploads"));
6. 저장 위치 설정
const storage = multer.diskStorage({
destination: function(req, file, cb){
cb(null, "uploads/");
},
filename: function(req, file, cb){
cb(null, Date.now() + path.extname(file.originalname));
}
});
const upload = multer({ storage: storage });
7. 업로드 폼 만들기
views/upload.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>파일 업로드</title>
</head>
<body>
<h1>파일 업로드</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="photo">
<button>업로드</button>
</form>
</body>
</html>
핵심은 이것입니다.
enctype="multipart/form-data"
8. 업로드 페이지 출력
app.get("/upload", (req, res) => {
res.sendFile(path.join(__dirname, "views", "upload.html"));
});
9. 단일 파일 업로드
app.post("/upload", upload.single("photo"), (req, res) => {
console.log(req.file);
res.send("업로드 완료");
});
photo는 input의 name과 같아야 합니다.
<input type="file" name="photo">
10. 업로드 결과 확인
업로드 후 uploads 폴더에 파일이 저장됩니다.
uploads
│
└── 1719384923000.jpg
11. 업로드된 이미지 출력
app.post("/upload", upload.single("photo"), (req, res) => {
res.send(`
<h1>업로드 완료</h1>
<img src="/uploads/${req.file.filename}" width="300">
`);
});
12. 여러 파일 업로드
HTML
<form action="/multi-upload" method="POST" enctype="multipart/form-data">
<input type="file" name="photos" multiple>
<button>여러 파일 업로드</button>
</form>
Node.js
app.post("/multi-upload", upload.array("photos", 5), (req, res) => {
console.log(req.files);
res.send("여러 파일 업로드 완료");
});
최대 5개까지 업로드됩니다.
13. 파일 확장자 제한
const fileFilter = (req, file, cb) => {
const allowed = ["image/jpeg", "image/png", "image/gif"];
if(allowed.includes(file.mimetype)){
cb(null, true);
}else{
cb(null, false);
}
};
const upload = multer({
storage: storage,
fileFilter: fileFilter
});
14. 파일 용량 제한
const upload = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 5
}
});
5MB까지 업로드 허용입니다.
15. 게시판 이미지 업로드 예시
게시글 작성 시 이미지도 함께 저장합니다.
HTML
<form action="/board/write" method="POST" enctype="multipart/form-data">
<input type="text" name="title" placeholder="제목">
<textarea name="content" placeholder="내용"></textarea>
<input type="file" name="image">
<button>등록</button>
</form>
Node.js
app.post("/board/write", upload.single("image"), (req, res) => {
const title = req.body.title;
const content = req.body.content;
const image = req.file.filename;
res.json({
title,
content,
image
});
});
16. MySQL에 파일명 저장
app.post("/board/write", upload.single("image"), (req, res) => {
const { title, content } = req.body;
const image = req.file ? req.file.filename : null;
const sql = "INSERT INTO board(title, content, image) VALUES(?,?,?)";
db.query(sql, [title, content, image], (err, result) => {
if(err){
return res.status(500).send("DB 오류");
}
res.send("게시글 등록 완료");
});
});
테이블에 image 컬럼이 필요합니다.
ALTER TABLE board ADD image VARCHAR(255);
17. 전체 예제 app.js
const express = require("express");
const multer = require("multer");
const path = require("path");
const app = express();
app.use(express.urlencoded({ extended: true }));
app.use("/uploads", express.static("uploads"));
const storage = multer.diskStorage({
destination: function(req, file, cb){
cb(null, "uploads/");
},
filename: function(req, file, cb){
cb(null, Date.now() + path.extname(file.originalname));
}
});
const upload = multer({ storage: storage });
app.get("/upload", (req, res) => {
res.sendFile(path.join(__dirname, "views", "upload.html"));
});
app.post("/upload", upload.single("photo"), (req, res) => {
res.send(`
<h1>업로드 완료</h1>
<img src="/uploads/${req.file.filename}" width="300">
`);
});
app.listen(3000, () => {
console.log("Server Running");
});
18. 실습 1
프로필 이미지 업로드
<input type="file" name="profile">
app.post("/profile", upload.single("profile"), (req, res) => {
res.send(req.file.filename);
});
19. 실습 2
갤러리 이미지 여러 개 업로드
app.post("/gallery", upload.array("photos", 10), (req, res) => {
res.json(req.files);
});
20. 이번 강의 핵심 정리
문법 설명
multer 파일 업로드 패키지
diskStorage() 저장 위치와 파일명 설정
destination 저장 폴더
filename 저장 파일명
upload.single() 단일 파일 업로드
upload.array() 여러 파일 업로드
req.file 단일 파일 정보
req.files 여러 파일 정보
express.static() 업로드 파일 출력
#18강. 파일 업로드(File Upload)