[nest] multer를 이용하여 이미지 올리기

Edward Hyun·2022년 4월 5일
0

backend

목록 보기
57/120

https://docs.nestjs.kr/techniques/file-upload

$ npm i -D @types/multer
import {
  Controller,
  Post,
  UseInterceptors,
  UploadedFile,
  Logger,
  Body,
} from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { multerOptions } from './multerOptions';
import { SimpleDto } from './simple.dto';

@Controller('file')
export class FileController {
  private logger = new Logger('File');

  @Post('upload')
  @UseInterceptors(FileInterceptor('file', multerOptions))
  uploadFile(
    @Body() simpleDto: SimpleDto,
    @UploadedFile() file: Express.Multer.File,
  ): Promise<void> {
    console.log(file);
    this.logger.log('uploading');
    console.log(simpleDto);
    return;
  }
}

여기서 중요한 것은 이 부분이다.
@UseInterceptors(FileInterceptor('file', multerOptions))

multerOptions에 디스크 저장인지 메모리 저장인지 설정할 수 있으며 디스크 저장인 경우 패스와 파일명을 지정함으로, 여기서 자동으로 해당 패스와 파일로 저장할 것이 설정된다.

@Body() simpleDto: SimpleDto,
@UploadedFile() file: Express.Multer.File,

위 부분에서 매개변수를 받아온다.
@Body 처리는 POST방식의 body를 받아오며
@UploadedFile()에서 실제 업로드된 파일을 받아온다.

이걸로 처리는 끝났으며, 위 multerOptions에 대한 부분만 처리해 주면 된다.

import { InternalServerErrorException } from '@nestjs/common';
import { existsSync, mkdirSync } from 'fs';
import { diskStorage } from 'multer';
import * as config from 'config';
import { extname } from 'path';
import { v4 as uuid } from 'uuid';

export const multerOptions = {
  fileFilter: (request, file, callback) => {
    if (file.mimetype.match(/\/(jpg|jpeg|png)$/)) {
      // 이미지 형식은 jpg, jpeg, png만 허용합니다.
      callback(null, true);
    } else {
      callback(new InternalServerErrorException(), false);
    }
  },

  storage: diskStorage({
    destination: (request, file, callback) => {
      const uploadPath = config.get('file').path;

      if (!existsSync(uploadPath)) {
        // public 폴더가 존재하지 않을시, 생성합니다.
        mkdirSync(uploadPath);
      }

      callback(null, uploadPath);
    },

    filename: (request, file, callback) => {
      callback(null, uuidRandom(file));
    },
  }),
};

export const uuidRandom = (file): string => {
  const uuidFile = `${uuid()}${extname(file.originalname)}`;
  return uuidFile;
};

fileFilter 부분은 형식에 맞는 파일인지 체크하는 부분이고,
storage를 여기서는 diskStorage로 선택했으며,
destination (패스)와 filename (파일명)을 처리해 주었다.

중간에

const uploadPath = config.get('file').path;

이 부분은 환경설정값을 불러와서 처리해 주는 부분이므로 개발자마다 방법이 다를 것이다.

참고 ::
https://velog.io/@yiyb0603/Nest.js%EC%97%90%EC%84%9C-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0
https://stove99.github.io/nodejs/2021/04/20/nestjs-file-upload/

profile
앱&웹개발(flutter, vuejs, typescript, react), 인공지능(nlp, asr, rl), 백엔드(nodejs, flask, golang, grpc, webrtc, aws, msa, nft, spring cloud, nest.js), 함수형 프로그래밍(scala, erlang)을 공부하며 정리합니다.

0개의 댓글