NestJS를 활용한 자바스크립트 애플리케이션의 파일 업로드 처리 방법

08 Nov 2023

nestjs

파일 업로드는 현대 웹 애플리케이션에서 필수적인 기능 중 하나입니다. NestJS는 Express 기반의 프레임워크로, 파일 업로드를 쉽게 처리할 수 있는 기능을 제공합니다. 이번 글에서는 NestJS를 사용하여 자바스크립트 애플리케이션의 파일 업로드를 어떻게 처리할 수 있는지 알아보겠습니다.

1. Multer 설치

먼저, 파일 업로드를 처리하기 위해 Multer 패키지를 설치해야 합니다. Multer는 Node.js에서 사용하는 파일 업로드 미들웨어로, NestJS에서도 사용할 수 있습니다. 다음 명령어를 사용하여 Multer를 설치합니다.

npm install --save @nestjs/platform-express multer

2. 파일 업로드 컨트롤러 생성

파일 업로드를 처리하기 위해 컨트롤러를 생성합니다. @Controller 데코레이터를 사용하여 컨트롤러를 선언하고, @Post() 데코레이터를 사용하여 파일 업로드 요청을 처리하는 메서드를 만듭니다.

import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';

@Controller('upload')
export class UploadController {
  @Post()
  @UseInterceptors(FileInterceptor('file'))
  async uploadFile(@UploadedFile() file) {
    // 파일 업로드 처리 로직
  }
}

위 코드에서 주목할 부분은 @UseInterceptors(FileInterceptor('file')) 데코레이터입니다. 이 데코레이터는 file이라는 이름의 파라미터를 가진 multipart/form-data 요청에서 파일을 추출하고, @UploadedFile() 데코레이터를 이용해 해당 파일에 액세스할 수 있도록 합니다.

3. 업로드된 파일 저장

파일 업로드와 관련된 로직을 추가로 구현해야 합니다. 업로드된 파일을 저장하거나, 파일 정보를 데이터베이스에 저장하는 등의 작업을 수행할 수 있습니다. 이 작업은 개발자의 요구에 따라 다양하게 구현될 수 있습니다.

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, callback) => {
        const randomName = Array(32).fill(null).map(() => (Math.round(Math.random() * 16)).toString(16)).join('');
        callback(null, `${randomName}${file.originalname}`);
      },
    }),
  }))
  async uploadFile(@UploadedFile() file) {
    // 파일 업로드 처리 로직
  }
}

위 코드에서는 diskStorage를 사용하여 파일을 로컬 디스크에 저장하는 방식을 사용했습니다. destination 옵션은 파일이 저장될 경로를 지정하며, filename 옵션은 파일의 이름을 지정하는 함수를 정의한 것입니다.

4. 앱 모듈에 업로드 컨트롤러 등록

생성한 업로드 컨트롤러를 앱 모듈에 등록해야 합니다. 이를 위해 UploadController를 모듈에 추가합니다.

import { Module } from '@nestjs/common';
import { MulterModule } from '@nestjs/platform-express';
import { UploadController } from './upload.controller';

@Module({
  imports: [
    MulterModule.register(),
  ],
  controllers: [
    UploadController,
  ],
})
export class AppModule {}

MulterModule은 Multer 설정을 위한 모듈로, register()를 호출하여 기본 설정을 사용하도록 합니다.

결론

NestJS는 Multer를 포함하여 파일 업로드를 처리하기 위한 강력한 기능을 제공합니다. 이를 활용하여 자바스크립트 애플리케이션에서 파일 업로드를 손쉽게 처리할 수 있습니다. 파일 업로드는 애플리케이션의 다양한 기능을 구현하는 데 큰 역할을 하므로, NestJS를 사용하여 간편하고 확장 가능한 파일 업로드 시스템을 구축해보세요.

참고: NestJS 공식 문서

#NestJS #파일업로드