[React] #22. React+Nestjs 파일 업로드
6176 단어 ReactNestJSfileuploadNestJS
리액트 파일 업로드 페이지
import React, {useState} from 'react';
export default function FileUploadPage(){
const [selectedFile, setSelectedFile] = useState();
const [isFilePicked, setIsFilePicked] = useState(false);
const changeHandler = (event) => {
setSelectedFile(event.target.files[0]);
setIsFilePicked(true);
};
const handleSubmission = () => {
var data = new FormData()
data.append('file', selectedFile)
fetch('http://localhost:3003/file/fileUpload', {
method: 'POST',
body: data
})
};
return(
<div>
<input type="file" name="file" onChange={changeHandler} />
{isFilePicked ? (
<div>
<p>Filename: {selectedFile.name}</p>
<p>Filetype: {selectedFile.type}</p>
<p>Size in bytes: {selectedFile.size}</p>
</div>
) : (
<p>Select a file to show details</p>
)}
<div>
<button onClick={handleSubmission}>Submit</button>
</div>
</div>
)
}
파일 선택 전
파일 선택 후
Nestjs 설정
필요 패키지 설치
npm install @nestjs/platform-express --save
npm install @types/express -D
file 이라는 모듈,컨트롤러,서비스를 만든다
npx @nestjs/cli g module file
npx @nestjs/cli g controller file --no-spec
npx @nestjs/cli g service file --no-spec
대충 이런식의 구조다.
file.module 수정
import { Module } from '@nestjs/common';
import { FileController } from './file.controller';
import { FileService } from './file.service';
import { MulterModule } from '@nestjs/platform-express';
@Module({
imports: [MulterModule.register({
dest: './files',
})],
controllers: [FileController],
providers: [FileService]
})
export class FileModule {}
file.controller 수정
import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { FileService } from './file.service';
@Controller('file')
export class FileController {
constructor( private fileService:FileService ){}
@Post("/fileUpload")
@UseInterceptors(
FileInterceptor('file'),
)
async fileUpload(@UploadedFile() file: Express.Multer.File){
console.log(file)
}
}
하다보니 서비스는 생략하겠다...
파일 업로드 후
루트 경로 밑에 files 라는 폴더가 생성되면서 파일이 저장된다. 뭔가 그냥 막 생성된 느낌이다. 실제로 열어보면 업로드한 파일이 맞더라.
참고 사이트
https://gabrieltanner.org/blog/nestjs-file-uploading-using-multer
Author And Source
이 문제에 관하여([React] #22. React+Nestjs 파일 업로드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@exoluse/React-22.-ReactNestjs-파일-업로드저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)