React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(15)

파일 업로드 기능 구현: Multer를 사용해 파일 업로드 및 MySQL에 경로 저장

이번 강의에서는 Multer를 사용해 파일 업로드 기능을 구현하고, 업로드된 파일의 경로를 MySQL에 저장하는 방법을 다룹니다. Multer는 Node.js에서 파일 업로드를 처리하기 위한 미들웨어로, 특히 Express와 함께 많이 사용됩니다.

Multer를 사용해 파일 업로드 및 MySQL에 경로 저장

---

1. Multer 설치 및 설정

1.1 Multer 설치

파일 업로드를 처리하기 위해 Multer를 설치합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행합니다.

npm install multer

 

---

2. Multer 설정

Multer를 사용하여 파일을 업로드하고, 서버에 저장할 파일 경로를 설정합니다.

2.1 서버에 Multer 설정 추가

multer 미들웨어를 사용해 파일을 처리하고, uploads 폴더에 저장합니다.

// server.js
const express = require('express');
const multer = require('multer');
const path = require('path');
const db = require('./db'); // MySQL 연결
const app = express();

app.use(express.json());

// 업로드한 파일을 저장할 경로 설정
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // 파일이 저장될 디렉토리
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname)); // 파일명 설정
  }
});

const upload = multer({ storage });

// 파일 업로드 처리 API
app.post('/upload', upload.single('file'), (req, res) => {
  const filePath = req.file.path; // 업로드된 파일의 경로
  const { title } = req.body;

  // 파일 경로와 제목을 MySQL에 저장
  const query = 'INSERT INTO files (title, file_path) VALUES (?, ?)';
  db.query(query, [title, filePath], (err, result) => {
    if (err) {
      return res.status(500).send('Error saving file info');
    }
    res.status(201).send('File uploaded and info saved successfully');
  });
});

// 서버 시작
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

2.2 코드 설명

• multer.diskStorage: 업로드된 파일을 저장할 위치와 파일명을 정의합니다.
• destination: 파일이 저장될 디렉토리를 설정합니다. 여기서는 uploads/ 폴더에 저장됩니다.
• filename: 파일명을 유니크하게 만들기 위해 날짜와 랜덤 숫자를 추가합니다.
• upload.single('file'): 한 번에 한 개의 파일을 업로드합니다. file은 프론트엔드에서 전송할 필드 이름입니다.

---

3. MySQL에 파일 경로 저장

MySQL에 파일 업로드 정보를 저장하기 위한 테이블을 생성합니다.

CREATE TABLE files (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255),
    file_path VARCHAR(255),
    uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

---

4. 프론트엔드에서 파일 업로드 처리

프론트엔드에서 파일을 선택하고 서버로 업로드하는 UI를 구현합니다. 파일 업로드와 제목을 함께 전송할 수 있도록 FormData를 사용합니다.

// src/components/FileUpload.js
import React, { useState } from 'react';
import axios from 'axios';

function FileUpload() {
  const [file, setFile] = useState(null);
  const [title, setTitle] = useState('');

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleTitleChange = (e) => {
    setTitle(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append('file', file);
    formData.append('title', title);

    axios.post('/upload', formData)
      .then(() => {
        alert('File uploaded successfully');
        setFile(null);
        setTitle('');
      })
      .catch((error) => {
        console.error('Error uploading file:', error);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>파일 업로드</h2>
      <div>
        <label>제목</label>
        <input
          type="text"
          value={title}
          onChange={handleTitleChange}
          required
        />
      </div>
      <div>
        <label>파일 선택</label>
        <input
          type="file"
          onChange={handleFileChange}
          required
        />
      </div>
      <button type="submit">업로드</button>
    </form>
  );
}

export default FileUpload;

4.1 코드 설명

• FormData: 파일과 함께 다른 데이터를 전송할 수 있는 객체입니다.
• axios.post: 파일과 제목을 서버로 POST 요청을 통해 전송합니다.

---

5. 파일 업로드된 경로 확인

파일이 업로드된 경로와 제목을 데이터베이스에서 조회하는 API를 만들어, 업로드된 파일의 정보를 확인할 수 있습니다.

// 파일 목록 조회 API
app.get('/files', (req, res) => {
  const query = 'SELECT * FROM files';
  
  db.query(query, (err, results) => {
    if (err) {
      return res.status(500).send('Error fetching files');
    }
    res.json(results);
  });
});

---

6. 전체 프로젝트 요약

1. Multer를 사용한 파일 업로드: 프론트엔드에서 선택한 파일을 서버로 전송하고, Multer를 사용해 서버에 저장합니다.
2. MySQL에 파일 경로 저장: 파일이 서버에 업로드된 경로와 함께 제목을 데이터베이스에 저장합니다.
3. 파일 경로 조회: 업로드된 파일의 정보(파일 경로와 제목)를 MySQL에서 조회할 수 있는 API를 제공합니다.

---

결론

이번 강의에서는 Multer를 사용해 파일 업로드 기능을 구현하고, 업로드된 파일의 경로를 MySQL 데이터베이스에 저장하는 방법을 배웠습니다. 이를 통해 웹 애플리케이션에서 파일 업로드 기능을 효율적으로 처리할 수 있습니다.