NestJS Client에서 받은 파일을 서버에 저장하기(단일파일)

 안녕하세요. 알렉스입니다. 이번에는 간단하게 Client에서 서버쪽으로 보낸 파일을 서버에 저장하는 방법에 대해서 알아보도록 하겠습니다.

해당 코드는 Swagger를 사용합니다. (링크)

// /src/upload/upload.controller.ts

import {

Controller,

Post,

UploadedFile,

UseInterceptors,

} from '@nestjs/common';

import { FileInterceptor } from '@nestjs/platform-express';

import { ApiBody, ApiConsumes, ApiOperation, ApiTags } from '@nestjs/swagger';

@ApiTags('Upload Files To Server')

@Controller('upload')

export class UploadController {

constructor() {}

@Post('sendToServer')

@ApiOperation({ summary: '파일을 서버쪽으로 upload' })

@ApiConsumes('multipart/form-data')

@ApiBody({

schema: {

type: 'object',

properties: {

file: {

type: 'string',

format: 'binary',

},

},

},

})

@UseInterceptors(

FileInterceptor('file', {

dest: './uploads', // 서버에 uploads폴더를 자동 생성(이안에 다운 받은 파일이 저장)

}),

)

downloadFile(@UploadedFile('file') file) {

return file;

}

}

코드1) Server Upload 적용

위의 코드처럼 작성을 하면 Swagger에 들어가서 파일을 올릴수 있습니다.

사진1) 코드1이 적용후 Swagger페이지 접속

사진2) Try out 버튼 누름

사진3) 실행후 응답값

Swagger를 이용하여 파일을 올린후 사진3과 같이 응답이 오는것을 알수 있습니다. 

 

{

"fieldname": "file",

"originalname": "portal2_Main.png",

"encoding": "7bit",

"mimetype": "image/png",

"destination": "./uploads",

"filename": "24eda8a1e2e8d46010d39fa8b2ca975f",

"path": "uploads/24eda8a1e2e8d46010d39fa8b2ca975f",

"size": 503451

}

코드2) 응답받은 JSON파일

사진4) Server에 저장된 파일

NestJS서버에 저장이 될때 임의의 filename이 주어집니다. 이때 Client한테 코드2와 같이 JSON응답을 줘서 향후에 파일이 필요시 요청할수 있게 정보를 전달해 줍니다.

fieldname : 파일 종류

originalname: 원래 이름

encoding: 인코딩 방법

mimetype: 파일 속성(사진, 동영상 등등)

destination: 저장폴더

filename: 서버에 저장될때 이름

path: 저장경로

size: 파일 크기

저장될때 확장자가 없지만 binary로 저장이 되기 때문에 상관 없습니다. 

해당 gitHub 경로 (링크)