[NestJS] Multer로 두 input에서 각각의 파일 받기(FileFieldsInterceptor)

한 name에 대해 여러 파일을 받는게 아닌,

위 상황처럼 다른 종류의 두 input에 대해 파일을 받아야 할 때가 있다. 

 

@Post('api/signup')
@UseInterceptors(FileInterceptor('logo_file'))
async signup(
  @Body() body: any, 
  @UploadedFile() logo_file: Express.Multer.File,
) {
  console.log(logo_file);
}

위 코드처럼 기존에 logo_file에 대해서만 잘 작동하는 파일이 있을 때, 

FileInterceptor 대신 FileFieldsInterceptor를 써서 해결할 수 있다. 

 

결과 바로 보려면 제일 하단으로.

 

https://github.com/nestjs/nest/issues/741

FileInterceptors does not support different field names · Issue #741 · nestjs/nest

https://github.com/nestjs/nest/pull/748

feature(@nestjs/common) add file-fields interceptor by thg303 · Pull Request #748 · nestjs/nest

 

위 링크에서 방법을 찾았으며 

내 코드에 적용하는데에는 따로 시행착오가 있었는데, 

 

https://velog.io/@dev_leewoooo/NestJs-파일업로드-이-글로-끝

NestJs 파일업로드 이 글로 끝!

해당 블로그의 도움도 받았다. 

 

@Post('api/signup')
@UseInterceptors(FileFieldsInterceptor([{ name: 'logo_file' }, { name: 'banner_file' }]))
async signup(
  @Body() body: any, 
  @UploadedFiles() files: { 
    logo_file: Express.Multer.File[], 
    banner_file: Express.Multer.File[] 
  }
) {
  console.log(files.logo_file[0]);
  console.log(files.banner_file[0]);
}

이렇게 logo_file 뿐만 아니라 따로 formData에 넣은 banner_file에 대해서도 받는걸 확인할 수 있다.