파일 업로드는 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. Node.js에서는 파일 업로드를 처리하기 위해 파일 처리 모듈과 미들웨어를 사용해 쉽게 구현할 수 있습니다. 이 글에서는 Node.js에서 파일 업로드를 처리하는 방법을 단계별로 설명하고, 이를 활용한 간단한 파일 업로드 서버를 구축하는 방법을 소개합니다.
파일 업로드 처리에 필요한 패키지
Node.js에서 파일 업로드를 처리하기 위해서는 몇 가지 패키지가 필요합니다. 여기에서는 express 프레임워크와 파일 업로드를 처리하는 multer 패키지를 사용합니다.
- Express: 웹 애플리케이션을 위한 Node.js 프레임워크
- Multer: multipart/form-data 형식의 데이터를 처리하는 미들웨어로, 파일 업로드에 사용
필요한 패키지 설치
먼저, 프로젝트 폴더를 생성한 후 필요한 패키지를 설치합니다.
$ npm init -y
$ npm install express multer
위 명령어를 실행하면 express와 multer 패키지가 설치되며, 파일 업로드 처리를 위한 기본 준비가 완료됩니다.
Express 서버에서 파일 업로드 처리하기
이제 Express 서버를 설정하고, multer를 사용해 파일 업로드 기능을 구현해보겠습니다.
1. Express 서버 설정
간단한 Express 서버를 설정합니다. 파일 업로드 경로와 요청을 처리할 수 있도록 라우트를 설정합니다.
// app.js
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
// 파일 저장 위치 및 파일명 설정
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/'); // 업로드 폴더 경로
},
filename: (req, file, cb) => {
cb(null, Date.now() + path.extname(file.originalname)); // 파일명 설정
}
});
const upload = multer({ storage: storage });
app.use(express.static('public')); // 정적 파일 제공 (HTML 파일 위치)
// 파일 업로드 처리 라우트
app.post('/upload', upload.single('file'), (req, res) => {
res.send('파일 업로드가 성공적으로 완료되었습니다.');
});
// 서버 실행
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});
위 코드는 간단한 Express 서버를 설정한 것입니다. multer를 사용하여 파일 업로드를 처리하며, 파일은 uploads 폴더에 저장됩니다. 파일 이름은 업로드 시 Date.now()를 사용해 현재 시간으로 설정되어 중복되지 않도록 합니다.
2. 파일 업로드 폴더 생성
파일이 저장될 uploads 폴더를 프로젝트 디렉터리에 생성합니다.
$ mkdir uploads
3. HTML 파일 작성
클라이언트에서 파일을 업로드할 수 있는 간단한 HTML 양식을 작성합니다. 이 양식을 통해 사용자가 파일을 선택하고 업로드할 수 있습니다.
<!-- 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" />
<button type="submit">업로드</button>
</form>
</body>
</html>
이 HTML 파일은 사용자가 파일을 선택하고 서버로 업로드할 수 있는 기본 양식을 제공합니다. enctype="multipart/form-data" 속성은 파일 업로드를 위한 필수 설정입니다.
4. 서버 실행 및 파일 업로드 테스트
이제 서버를 실행하고, 브라우저에서 파일을 업로드할 수 있는지 확인해봅니다.
$ node app.js
서버가 실행되면 브라우저에서 http://localhost:3000으로 이동하여 파일 업로드 양식을 확인할 수 있습니다. 파일을 선택한 후 업로드를 클릭하면, 서버는 파일을 처리하고 uploads 폴더에 저장합니다. 파일 업로드가 성공적으로 완료되면, 브라우저에 업로드 완료 메시지가 표시됩니다.
Multer 옵션: 파일 크기 제한 및 필터링
multer를 사용하면 파일 크기 제한이나 파일 유형을 필터링하는 등 다양한 옵션을 설정할 수 있습니다.
파일 크기 제한
업로드할 파일의 크기를 제한하려면 limits 옵션을 설정할 수 있습니다. 예를 들어, 파일 크기를 2MB로 제한하는 방법은 다음과 같습니다.
const upload = multer({
storage: storage,
limits: { fileSize: 2 * 1024 * 1024 } // 파일 크기 제한: 2MB
});
파일 형식 필터링
특정 파일 형식만 업로드할 수 있도록 제한하려면 fileFilter 옵션을 사용할 수 있습니다. 아래 코드는 이미지 파일(JPG, PNG)만 허용하는 필터링 방법입니다.
const upload = multer({
storage: storage,
fileFilter: (req, file, cb) => {
const fileTypes = /jpeg|jpg|png/;
const mimeType = fileTypes.test(file.mimetype);
const extname = fileTypes.test(path.extname(file.originalname).toLowerCase());
if (mimeType && extname) {
return cb(null, true);
} else {
cb(new Error('이미지 파일만 업로드 가능합니다.'));
}
}
});
위 코드는 파일의 MIME 타입과 확장자를 검사하여 JPG, PNG 형식의 이미지 파일만 업로드를 허용합니다.
결론
Node.js에서 Multer를 사용하면 파일 업로드 기능을 쉽게 구현할 수 있습니다. Express 서버와 Multer 미들웨어를 활용하여 클라이언트가 업로드한 파일을 서버에 저장하고, 파일 크기 제한 및 형식 필터링과 같은 추가 설정도 가능합니다. 파일 업로드는 웹 애플리케이션에서 자주 사용되는 기능이므로, 이를 잘 활용하여 효율적인 파일 관리 시스템을 구축해보세요!
댓글 쓰기