[React] #22. React+Nestjs 파일 업로드

exoluse·2021년 12월 3일

Nestjs

목록 보기

6/7

리액트 파일 업로드 페이지

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)
    }
}