Nest.js - File-upload

Multer를 사용해서 파일 업로드를 진행해 보겠다.

Nest.js 공식 홈페이지 : https://docs.nestjs.kr/techniques/file-upload
Multer 깃허브 : https://github.com/expressjs/multer#multeropts

설치

npm i -D @types/multer
npm i multer

단일 파일 업로드

@Post('upload')
@UseInterceptors(FileInterceptor('file'))
uploadFile(@UploadedFile() file: Express.Multer.File) {
  console.log(file);
}

@FileInterceptor(fileName, option)

• fileName: 프론트에서 보낼 때 필드 이름
• option: MulterOptions

다중 파일 업로드

@Post('upload')
@UseInterceptors(FilesInterceptor('files'))
uploadFile(@UploadedFiles() files: Array<Express.Multer.File>) {
  console.log(files);
}

@Post('upload')
@UseInterceptors(FileFieldsInterceptor([
  { name: 'avatar', maxCount: 1 },
  { name: 'background', maxCount: 1 },
]))
uploadFile(@UploadedFiles() files: { avatar?: Express.Multer.File[], background?: Express.Multer.File[] }) {
  console.log(files);
}

@Post('upload')
@UseInterceptors(AnyFilesInterceptor())
uploadFile(@UploadedFiles() files: Array<Express.Multer.File>) {
  console.log(files);
}

Multer 옵션

	dest?: string;
    /** The storage engine to use for uploaded files. */
    storage?: any;
    /**
     * An object specifying the size limits of the following optional properties. This object is passed to busboy
     * directly, and the details of properties can be found on https://github.com/mscdex/busboy#busboy-methods
     */
    limits?: {...};
    /** Keep the full path of files instead of just the base name (Default: false) */
    preservePath?: boolean;
    fileFilter?(req: any, file: {...}, callback: (error: Error | null, acceptFile: boolean) => void): void;

dest

dest 같은경우는 받은 파일을 어디에다 저장 할 지 정하는 옵션이다.

storage

srotage는 dest보다 더 세밀하게 파일 저장 옵션을 정 할 수 있다.

limits

파일을 받아 올 때 제한을 걸 수 있다.

Key	Description	Default
fieldNameSize	Max field name size	100 bytes
fieldSize	Max field value size (in bytes)	1MB
fields	Max number of non-file fields	Infinity
fileSize	For multipart forms, the max file size (in bytes)	Infinity
files	For multipart forms, the max number of file fields	Infinity
parts	For multipart forms, the max number of parts (fields + files)	Infinity
headerPairs	For multipart forms, the max number of header key=>value pairs to parse	2000

filterFilter

특정 파일만 받아오게 할 수 있다.

@UploadFile() 데코레이터에 pipe 등록하기

import { PipeTransform, Injectable, ArgumentMetadata } from '@nestjs/common';

@Injectable()
export class FileSizeValidationPipe implements PipeTransform {
  transform(value: any, metadata: ArgumentMetadata) {
    // "value" is an object containing the file's attributes and metadata
    const oneKb = 1000;
    return value.size < oneKb;
  }
}

@Post('file')
uploadFileAndPassValidation(
  @Body() body: SampleDto,
  // 1kb 보다 용량이 작은 파일만 등록이 가능하다.
  @UploadedFile(FileSizeValidationPipe)
  )
  file: Express.Multer.File,
) {
  return ;
}

@UploadFile() 데코레이터에 내장 pipe 등록하기

Nest에는 파일 업로드를 편하게 해주는 내장 pipe를 제공한다. 내장 파이프를 등록해 보자.

@UploadedFile(
  new ParseFilePipe({
    validators: [
      new MaxFileSizeValidator({ maxSize: 1000 }),
      new FileTypeValidator({ fileType: 'image/jpeg' }),
    ],
  }),
)
file: Express.Multer.File,

위와 같이 내장 pipe를 활용하여서 파일의 유효성 검사도 할 수 있으며, ParseFilePipeBuilder를 사용하여 유효성 검사를 할 수도 있다.

export declare class ParseFilePipeBuilder {
    private validators;
    addMaxSizeValidator(options: MaxFileSizeValidatorOptions): this;
    addFileTypeValidator(options: FileTypeValidatorOptions): this;
    addValidator(validator: FileValidator): this;
    build(additionalOptions?: Omit<ParseFileOptions, 'validators'>): ParseFilePipe;
}