2월21일 - nestjs-form-data

개요

React에서 Nest.js 서버로 axios를 통해 글쓰기 요청을 보내는 과정에서

이미지 파일도 같이 보낼걸 생각해

원래

axios
  .post('http://localhost:8080/boards', {
    title,
    content,
  })

이렇게 보냈다면

 

formData를 써서 

const formData = new FormData();
formData.append('title', title);
formData.append('content', content);
formData.append('file', file);
axios
  .post('http://localhost:8080/boards', formData)

이렇게 보내게끔 수정했는데

 

이상하게 Nest.js 서버의 controller에서 받는 body값이 계속 빈 {}로 전달되고 있었다.

@Post()
createBoard(@Body() boardData) {
  console.log(boardData);  // {}
  return;
}

 

Nest.js에서 formData를 못받는 이유가 따로 있을거라 생각해 

방법이 없나 찾아보니 

패키지를 통해 해결할 방법이 있었다.

 

 

해결 방법

https://www.npmjs.com/package/nestjs-form-data

nestjs-form-data

 

nestjs-form-data 패키지를 사용하면 간단하게 해결할 수 있다.

 

module에서 NestjsFormDataModule을 import에 넣고 

controller에서 데코레이터를 통해 formData를 받게끔 선언하면 된다.

 

module

@Module({
  imports: [
    NestjsFormDataModule,
  ],
  controllers: [BoardsController],
  providers: [BoardsService]
})
export class BoardsModule {}

 

controller

@Post()
@FormDataRequest()
createBoard(@Body() boardData) {
  console.log(boardData);
  return;
}

 

이렇게 함으로서 formData를 통해 이미지 파일과 다른 데이터까지 같이 받을 수 있다.

 

+ 추가

nestjs-form-data 사용 시 dto를 활용하지 못한다는 문제로 인해

nestjs-form-data를 사용하지 않고 multer와 함께 dto 상의 설정 변경을 통해 

데이터를 받는 방법을 알아내 아래 링크에 정리했다.

 

https://4sii.tistory.com/431

[Nest.js] FormData 전달받기 with multer