파일 업로드는 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 이번 포스팅에서는 React에서 Axios를 사용하여 파일을 서버로 업로드하고, 서버 측에서는 Nest.js를 활용하여 파일을 처리하는 방법을 다룰 것입니다.
클라이언트 측 (React)
React 애플리케이션에서 파일 업로드를 구현하려면 다음 단계를 따릅니다.
1. Axios 및 상태 관리 설정
먼저, Axios를 설치하고 React 상태를 관리하기 위한 상태 변수를 설정합니다.
npm install axios
import React, { useState } from 'react';
import axios from 'axios';
function FileUpload() {
const [file, setFile] = useState(null);
// 파일 선택 이벤트 핸들러
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];
setFile(selectedFile);
};
// 파일 업로드 이벤트 핸들러
const handleUpload = async () => {
try {
const formData = new FormData();
formData.append('file', file);
// Axios를 사용하여 파일 업로드
await axios.post('http://localhost:3000/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
alert('파일 업로드 성공');
} catch (error) {
console.error('파일 업로드 실패:', error);
}
};
return (
<div>
<input type="file" onChange={handleFileChange} />
<button onClick={handleUpload}>업로드</button>
</div>
);
}
export default FileUpload;
2. 파일 선택 및 업로드
React 컴포넌트에서 파일을 선택하고 업로드하는 부분을 작성합니다. handleFileChange 함수에서 파일을 선택하고, handleUpload 함수에서 파일을 서버로 업로드합니다. FormData 객체를 사용하여 파일을 서버로 전송하고, Content-Type 헤더를 multipart/form-data로 설정합니다.
서버 측 (Nest.js)
서버 측에서는 Nest.js를 사용하여 파일 업로드를 처리합니다.
1. 파일 업로드 컨트롤러 생성
Nest.js에서 파일 업로드를 처리하기 위한 컨트롤러를 작성합니다.
import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { diskStorage } from 'multer';
@Controller('upload')
export class UploadController {
@Post()
@UseInterceptors(FileInterceptor('file', {
storage: diskStorage({
destination: './uploads', // 파일 업로드 경로
filename: (req, file, cb) => {
const fileName = `${Date.now()}-${file.originalname}`;
cb(null, fileName);
},
}),
}))
uploadFile(@UploadedFile() file) {
if (!file) {
return '파일을 선택해주세요.';
}
return '파일 업로드 성공';
}
}
2. 파일 업로드 설정
Nest.js의 @nestjs/platform-express와 multer를 사용하여 파일 업로드를 설정합니다. 업로드된 파일은 설정된 업로드 경로(./uploads)에 저장됩니다.
3. 서버 실행 및 테스트
React 애플리케이션과 Nest.js 서버를 실행하고, 파일을 선택하고 업로드 버튼을 클릭하여 파일을 서버로 전송할 수 있습니다. 클라이언트에서 업로드한 파일은 서버의 업로드 경로에 저장됩니다.
이렇게 React와 Nest.js를 사용하여 파일 업로드를 구현할 수 있습니다. 클라이언트 측에서는 Axios를 사용하여 파일을 업로드하고, 서버 측에서는 Nest.js를 활용하여 파일을 처리합니다. 이것은 웹 애플리케이션에서 파일 업로드를 구현할 때 유용한 방법 중 하나입니다.