NestJS 기초 (14) 이미지 파일 업로드하기

NestJS에서는 multer 미들웨어 패키지를 사용하여 이미지 파일을 업로드할 수 있습니다. multer는 multipart/form-data 형식을 통해 HTTP POST 요청으로 업로드 되는 파일을 처리할 수 있게 도와줍니다.

multer 설치 및 기본 설정

다음 명령어를 통해 multer를 설치할 수 있습니다.

$ npm i -D @types/multer

multer를 설치했다면 컨트롤러 파일에 다음과 같이 이미지 업로드를 처리할 코드를 작성합니다. 이미지 업로드 직전에 인증 섹션에서 만들었던 가드를 추가해주도록 하겠습니다. 이렇게 하면 인증 토큰을 보유한 사용자만 이미지 업로드를 할 수 있습니다.

//users.contoller.ts

@ApiOperation( {summary: '이미지 업로드'})
@UseInterceptors(FilesInterceptor('file'))
@UseGuards(AuthGuard('jwt')) //인증된 사용자만(토큰 보유) 이미지 업로드
@Post('upload')
uploadImg(@UploadedFiles() files: Array<Express.Multer.File>) {
    console.log(files);
    return files;
}

다음으로 모듈에 추가를 마치면 기본 설정이 모두 끝납니다.

//users.module.ts

@Module({
  imports: [
      MulterModule.register({
          dest: './upload',
    }),
  ]
})

포스트맨에서 이미지 업로드 테스트

이제 포스트맨을 통해 이미지 파일 업로드를 테스트해보겠습니다.

1. 헤더에 JWT를 Bearer Token 형식으로 담습니다.
2. POST 요청에서 form-data 타입을 선택합니다.
3. KEY에는 FilesInterceptor에 지정한 file을 입력하고 형식을 Text에서 File로 바꿔줍니다. VALUE를 클릭하면 이미지를 업로드할 수 있는 창이 표시됩니다.
4. 전송 버튼을 누르면 이미지가 업로드됩니다.
5. 프로젝트에 upload 디렉토리가 새롭게 생성되며, 해당 파일이 업로드된 것을 확인할 수 있습니다.

 

참고 자료

• https://docs.nestjs.com/techniques/file-upload