[Nestjs] multer로 이미지 파일 업로드하기

 

multer란 ? 
- Node.js 환경에서 파일 업로드를 처리하는 미들웨어로 파일을 서버에 업로드할 때 유용하게 사용됨. 

1. 설치

npm install multer @types/multer

2. 서버 설정
2-1. multer 설정
multer 미들웨어는 파일 저장 위치를 설정할 수 있게 해줌. 
두가지 저장방식이 있음
1) 디스크 저장 
2) 메모리 저장

나는 디스크에 바로 저장을 할 예정이라서
distStorage 옵션을 사용. 

multer 설정옵션에 대한 클래스를 작성할 수 있다.

/src/util/multer.config.ts

import { Injectable } from '@nestjs/common';
import * as multer from 'multer';
import { MulterOptionsFactory } from '@nestjs/platform-express';

@Injectable()
export class MulterConfig implements MulterOptionsFactory {
  constructor() {}

  createMulterOptions() {
    return {
      storage: multer.diskStorage({
        destination: (req, file, cb) => {
          cb(null, 'C:\\Users\\USER-0007\\images');
        },
        filename: (req, file, cb) => {
          cb(null, file.originalname);
        },
      }),
      limits: {
        fieldSize: 50 * 1024 * 1024, // 50MB 제한
        files: 100,
      },
    };
  }
}

fieldSize를 지정할 수 있고 

files의 갯수를 제한할 수 있음.

 

2-2. multer config를 module로 import 
multer를 적용하려는 모듈에 import해야함 

/src/upload/upload.module.ts

import { Module } from '@nestjs/common';
import { UploadService } from './upload.service';
import { UploadController } from './upload.controller';
import { MulterModule } from '@nestjs/platform-express';
import { MulterConfig } from '../util/multer.config';

@Module({
  imports: [
    MulterModule.registerAsync({
      useClass: MulterConfig,
    }),
  ],
  controllers: [UploadController],
  providers: [UploadService],
})
export class UploadModule {}

2-3. 컨트롤러 작성
@UseInterceptors 데코레이터와 FileInterceptor를 추가함
FileInterceptor의 인자인 'images'는 API 요청시 파일을 보내는 필드명임 

import {
  Controller,
  Post,
  UploadedFiles,
  UseInterceptors,
} from '@nestjs/common';
import { UploadService } from './upload.service';
import { FilesInterceptor } from '@nestjs/platform-express';

@Controller('upload')
export class UploadController {
  constructor(private readonly uploadService: UploadService) {}

  @UseInterceptors(FilesInterceptor('images'))
  @Post('images')
  async uploadFiles(@UploadedFiles() files: Array<Express.Multer.File>) {
    return await this.uploadService.uploadImages(files);
  }
}

 

싱글파일을 업로드하는 경우 

UseInterceptors에 FileInterceptor를 적용하면 된다.

 

 

2-4. 서비스 작성 

import { Injectable } from '@nestjs/common';

@Injectable()
export class UploadService {
  async uploadImages(files: Array<Express.Multer.File>) {
    return files;
  }
}

 

파일을 받아서 진행할 비지니스 로직을 작성하면 됨. 

일단 그냥 return하는 것으로 진행해봄. 

 

3. 파일 업로드 테스트 (postman 사용)

 

4. 출력값 확인 

파일의 메타데이터를 확인할 수 있음. 

 

 

파일이 잘 저장된것도 확인하였음.