배경

• HeatPick 어플리케이션은 지도 기반 SNS 어플리케이션으로 자신의 프로필 이미지를 설정할 수 있고, 스토리 생성 시 이미지를 포함한 게시글을 작성할 수 있어야 합니다.
• 해당 파일들은 모두 서버에 안전하게 저장되어야 하고, 사용자 요청 시 안전하게 전달 될 수 있어야 합니다.

회원가입 시 이미지 선택

스토리 생성 시 이미지 선택

Multer

• Multer 란 Node.js 진영에서 이미지나 동영상과 같은 파일들을 멀티파트 형식으로 업로드를 하기 위한 미들웨어 입니다. NestJS에서는 파일 업로드를 위해 Express 용 Multer 미들웨어를 사용하라고 권장하고 있습니다.

File(s)Interceptor

• NestJS에서는 요청 전후, 응답 전후에 대한 처리를 위해 Interceptor라는 기능을 제공하고 있습니다. 해당 기능을 통해 멀티파트 형식의 데이터를 Intercept하기 위해 File Intercepter을 제공하며 해당 기능을 통해 멀티파트 형식에서 파일을 분리해줍니다.
• 여러 파일들을 Intercept하기 원한다면 filesInterceptor 을 이용하여 처리할 수 있습니다.

업로드 하기

POST /story/create HTTP/1.1
Host: localhost:3000
Authorization: Bearer ...토큰
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="title"

1
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="content"

내 스토
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="categoryId"

2
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="place"

{"latitude": 1000.1232142412421111, "longitude":2.042142141242142, "title":"abc", "address":"fsafsa"}
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="date"

2023-11-20T14:30:00Z
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="images"; ...파일정보
Content-Type: image/webp

(data)
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="images"; ...파일정보
Content-Type: image/webp

(data)
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="images"; ...파일정보
Content-Type: image/webp

(data)
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="badgeId"

58
------WebKitFormBoundary7MA4YWxkTrZu0gW--

실제 서버에서 받을 데이터는 해당 요청이고 해당 요청을 처리하는 코드를 작성했습니다.

 	@Post('create')
  @UseInterceptors(FilesInterceptor('images', 5))
  @ApiOperation({ summary: '스토리 생성' })
  @ApiResponse({
    status: 200,
    description: 'storyId',
    type: StoryCreateResponseDto,
  })
  async create(@UploadedFiles() images: Array<Express.Multer.File>, @Request() req: any, @Body(new ValidationPipe({ transform: true })) createStoryRequestDto: CreateStoryRequestDto): Promise<StoryCreateResponseDto> {
    const { title, content, categoryId, place, badgeId, date } = createStoryRequestDto;
    const storyCreateResponseDto = await this.storyService.create(req.user.userRecordId, { title, content, categoryId, place, images, badgeId, date });
    return storyCreateResponseDto;
  }

해당 코드는 스토리 생성을 처리하는 Controller로, @UseInterceptors(FilesInterceptor('images', 5))

데코레이터를 통해 파일을 받아올 수 있었습니다. (FilesInterceptor에 2번째 옵션은 최대 파일의 개수를 설정하는 필드입니다.) 또한 현재 코드에는 없지만 @UploadedFiles()