Node.js Multer

2023. 12. 10. 20:21·BACK END

이미지를 저장하는 간단한 Node.js 서버를 만들어보겠습니다.

express 프레임 워크는 이전장에서 설치했으니 이 과정은 재끼겠습니다.

multer와 mysql2 패키지를 설치 합시다.

npm install --save multer mysql2

Multer란?

Multer는 파일 업로드를 위해 사용하는 Node.js의 미들 웨어랍니다. multipart/form-data 형식으로 파일 업로드를 지원하기 때문에 가장 많이 사용해요.

 

첫번째로 필요한 모듈들을 호출해주고 포트 번호를 지정해줍니다.  저는 Node.js를 사용하니 포트 번호는 3000번이네요.

const express = require('express');
const multer = require('multer');
const mysql = require('mysql2');
const path = require('path');
const app = express();
const PORT = 3000;

 

MySQL 데이터베이스에 연결을 설정해줍니다. Database는 현재 사용중엔 Database의 이름을 지정해주면 됩니다.

// MySQL 연결 설정
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'cloud_bridge'
});

db.connect((err) => {
    if (err) throw err;
    console.log('MySQL connected');
});

multer 라이브러리를 사용해 이미지 업로드를 위한 설정해줍니다.

  • destination : 업로드된 파일이 저장될 디렉토리를 지정
  • filename : 업로드 된 파일의 이름을 결정하는 함수를 정의합니다. 
  • cb : callback의 줄임말로 JavaScript에서 비동기 작업이 완료 되었을 대 실행되는 함수로 여기선 새로운 파일에 대한 파일명을 생성합니다.
// 이미지 업로드를 위한 Multer 설정
const storage = multer.diskStorage({
    destination: './uploads',
    filename: (req, file, cb) => {
        cb(null, file.fieldname + '-' + Date.now() + '.jpg');
    }
});

// Multer 인스턴스 생성
const upload = multer({ storage: storage });

 

POST 요청을 통해 파일을 업로드 하고 파일 경로를 MySQL에 저장하기 위한 코드를 작성해 줍니다.

중요한 부분은 upload.single('img')에서 img 입니다. 

현재 Key값이 img입니다. 따라서 Client에서 Key 값 사용을 img로 해서 전달해야 합니다.

요청이 정상적으로 수행된다면 파일이 uploads 폴더에 저장됩니다.

app.use(express.static(path.join(__dirname, '')));

// 이미지 업로드를 처리하는 라우트
app.post('/uploads', upload.single('image'), (req, res) => {
    const imagePath = req.file.path;
    const sql = 'INSERT INTO images (path) VALUES (?)';

    db.query(sql, [imagePath], (err, result) => {
        if (err) {
            console.error('Error inserting image path into MySQL:', err);
            res.status(500).send('Internal Server Error');
        } else {
            console.log('Image path inserted into MySQL');
            res.send('Image uploaded successfully');
        }
    });
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

 

이제 간단한 HTML을 만들어 테스트 해보겠습니다. 이 때 눈여겨 볼 점은 enctype이 multipary/form-data라는 점입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Upload</title>
</head>
<body>
    <h1>Image Upload</h1>
    <form action="http://localhost:3000/uploads" method="post" enctype="multipart/form-data">
        <input type="file" name="image" accept="image/*">
        <button type="submit">Upload Image</button>
    </form>
</body>
</html>

이미지 하나를 지정해 upload 해줍니다.

MySQL에도 정상적으로 입력 되고 uploads 폴더에도 파일이 잘 저장 되었습니다 :)

'BACK END' 카테고리의 다른 글

Docker + Node.js + Nginx 2  (1) 2023.12.11
Docker + Node.js + Nginx 1  (2) 2023.12.10
HTTP multipart/form-data  (2) 2023.12.10
Nginx와 Node.js 쿵짝쿵짝 환경 구축하기  (1) 2023.12.10
Nginx 분석  (1) 2023.12.09
'BACK END' 카테고리의 다른 글
  • Docker + Node.js + Nginx 2
  • Docker + Node.js + Nginx 1
  • HTTP multipart/form-data
  • Nginx와 Node.js 쿵짝쿵짝 환경 구축하기
빨주노초잠만보
빨주노초잠만보
  • 빨주노초잠만보
    과거의 나를 통해 미래의 나를 성장시키자
    빨주노초잠만보
  • 전체
    오늘
    어제
    • 분류 전체보기 (94)
      • TEKHIT ANDROID SCHOOL (4)
      • Android Architecture (7)
      • Android (40)
      • PROJECT (5)
      • KOTLIN (10)
        • 코루틴의 정석 (3)
      • BACK END (12)
      • CS (2)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    interface vs abstract
    sealed class vs enum class
    android clean architecture
    Repository Pattern
    kotlin array
    repository
    코틀린 코루틴의 정석
    kotlin interface vs abstract
    Throttle
    kotlin abstract class
    MVI
    Clean Architecture
    DI
    의존성 주입
    STATEFLOW
    Room
    DataSource
    android Room
    sealed class
    value class
    ThrottleFirst
    kotlin 타입 소거
    callbackflow
    saeled class enum class 차이
    flow
    orbit
    kotlin interface
    Livedata
    리사이클러뷰 풀
    kotlin interface abstract 차이
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
빨주노초잠만보
Node.js Multer
상단으로

티스토리툴바