Note > 자바스크립트 프레임워크/라이브러리모음

Multer란?

파일 업로드를 위해 사용되는 multipart/form-data 를 다루기 위한 node.js 의 미들웨어 입니다. 효율성을 최대화 하기 위해 busboy 를 기반으로 하고 있습니다.

설치

$ npm install --save multer

파일 전송 쪽 단일 파일 //react, axios, react-dropzone 예시

const UploadApp = () => {
    const onDrop = async (acceptedFiles) => {
        const formData = new FormData();
        formData.append('file', acceptedFiles[0]);
        try {
            const response = await axios.post('http://localhost:3000/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
            });

            if (response.status === 200) {
                console.log('File uploaded successfully.');
            } else {
                console.error('File upload failed.');
            }
        } catch (error) {
            console.error('Error uploading file:', error);
        }
    };

    const { getRootProps, getInputProps } = useDropzone({ onDrop });

    return (
             <div {...getRootProps()} style={{ border: '2px dashed #ccc', padding: '20px', textAlign: 'center' }}>
                <input {...getInputProps()} />
                <p>Drag & drop a file here, or click to select a file</p>
            </div>  
    );
};

export default UploadApp;

서버쪽 Multer : multipart/form-data 데이터 처리

./up.js <-- url 처리 및 전송데이터 처리용 express코드

./uploads <-- 첨부파일 저장 위치

import express from 'express';
import multer from 'multer';
import path from 'path';
import cors from 'cors'; // CORS 미들웨어 추가

const app = express();
const port = 3000;

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // 파일 저장 경로 설정
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
    const fileExtension = path.extname(file.originalname);
    cb(null, file.fieldname + '-' + uniqueSuffix + fileExtension); // 파일 이름 설정
  },
});

const upload = multer({ storage });

app.use(cors({
  origin: 'http://localhost:5173', // 클라이언트 주소
}));

app.use(express.static('public'));
app.use('/uploads', express.static('uploads'));

app.post('/upload', upload.single('file'), (req, res) => {
  console.log('request start....')
  res.status(200).json({ message: 'File uploaded successfully.' });
});

app.get('/alive',(req, res) => { 
  res.status(200).json({ message: 'server alive.' });
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

cors 미들웨어는 react실행하는 쪽 에서 axios 전송 요청시 에러가 발생해서 추가핬습니다.

실행 및 테스트

>node ./up.js

multer/doc/README-ko.md at master · expressjs/multer (github.com)