자바스크립트 미들웨어를 활용한 파일 업로드 처리 방법
파일 업로드는 웹 개발에서 자주 사용되는 기능 중 하나입니다. 자바스크립트를 사용하여 파일 업로드를 처리하는 방법에 대해 알아보겠습니다. 이를 위해 우리는 multer라는 자바스크립트 미들웨어를 사용할 것입니다.
multer 소개
multer는 Express.js에서 파일 업로드를 처리하기 위한 미들웨어 입니다. 이를 사용하면 간단하게 파일 업로드 기능을 구현할 수 있습니다.
설치
먼저, multer를 설치해야 합니다. npm을 사용하여 다음 명령어를 실행하세요:
npm install multer
파일 업로드 처리
multer를 사용하여 파일 업로드를 처리하는 방법은 다음과 같습니다:
multer모듈을 불러옵니다:
const multer = require('multer');
- 업로드된 파일을 저장할 디렉토리를 정의합니다:
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
cb(null, file.originalname);
}
});
multer미들웨어를 생성합니다:
const upload = multer({ storage: storage });
- 파일 업로드를 처리하는 라우트 핸들러를 작성합니다.
upload미들웨어를 사용하여 업로드된 파일을 처리할 수 있습니다:
app.post('/upload', upload.single('file'), function (req, res, next) {
// 파일 업로드 후 처리할 로직을 작성합니다.
});
위의 예시 코드에서 upload.single('file')은 하나의 파일만 업로드할 때 사용하는 메서드입니다. 만약 다중 파일 업로드를 원한다면 upload.array('files')를 사용할 수 있습니다.
예시 코드
아래는 Express.js를 사용하여 파일 업로드를 처리하는 예시 코드입니다:
const express = require('express');
const multer = require('multer');
const app = express();
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
cb(null, file.originalname);
}
});
const upload = multer({ storage: storage });
app.post('/upload', upload.single('file'), function (req, res, next) {
// 파일 업로드 후 처리할 로직을 작성합니다.
});
app.listen(3000, function () {
console.log('서버가 3000번 포트에서 실행 중입니다.');
});
위의 코드에서 uploads/는 업로드된 파일이 저장될 디렉토리입니다. 필요에 따라 이 값을 원하는 경로로 수정할 수 있습니다.
마무리
이 글에서는 자바스크립트 미들웨어인 multer를 활용하여 파일 업로드를 처리하는 방법을 알아보았습니다. multer는 간단하고 효율적인 파일 업로드 처리를 가능하게 해줍니다. 따라서 파일 업로드가 필요한 프로젝트에서는 multer를 적극적으로 활용하면 좋습니다.
해시태그: #자바스크립트 #파일업로드 #multer