[javascript] Express.js에서의 파일 업로드 처리 방법

04 Dec 2023

javascript

이번 블로그 포스트에서는 Express.js로 파일 업로드를 처리하는 방법에 대해 알아보겠습니다.

1. multer 모듈 설치

multer는 Express.js에서 파일 업로드를 처리하기 위한 모듈입니다. 먼저, 프로젝트 폴더에서 다음 명령어를 실행하여 multer를 설치합니다.

npm install multer

2. Express 앱 설정

Express 앱을 설정하고 multer 모듈을 사용하기 위해 다음 코드를 추가합니다.

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

const app = express();
const upload = multer({ dest: 'uploads/' }); // 파일이 업로드되는 경로 설정

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// 파일 업로드를 위한 라우트 설정
app.post('/upload', upload.single('file'), (req, res) => {
  res.send('파일 업로드가 완료되었습니다.');
});

app.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행중입니다.');
});

위 코드에서 upload 변수를 사용하여 multer를 설정합니다. dest 옵션은 업로드된 파일이 저장될 폴더의 경로를 설정하는 부분입니다.

3. HTML 폼 생성

파일을 업로드하기 위한 HTML 폼을 생성합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>파일 업로드</title>
  </head>
  <body>
    <h1>파일 업로드</h1>
    <form action="/upload" method="POST" enctype="multipart/form-data">
      <input type="file" name="file"><br><br>
      <input type="submit" value="업로드">
    </form>
  </body>
</html>

4. 서버 실행 및 파일 업로드 테스트

Express.js 앱을 실행하고 웹 브라우저에서 http://localhost:3000에 접속하여 파일을 업로드하는 테스트를 수행합니다. 업로드된 파일은 uploads/ 폴더에 저장됩니다.

마무리

Express.js와 multer 모듈을 사용하여 파일 업로드를 처리하는 방법에 대해 알아보았습니다. multer는 다양한 파일 업로드 관련 기능을 제공하므로 필요한 경우 해당 문서를 참고하시기 바랍니다.

참고 자료

multer GitHub