NestJS/ 이미지 파일업로드

NestJS 에서 이미지 업로드 하기

nestjs doc

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

nodejs doc

• https://nodejs.org/api/path.html

multer doc

• https://github.com/expressjs/multer

아래내용을 이해하기 위해선 위 세 문서를 읽어보시는 것을 권장합니다.

필요한 모듈

npm i -D @types/multer

db에는 파일이 아닌 경로를 저장한다!

사용예시

/common/utils

import * as multer from 'multer';

import * as path from 'path';

import * as fs from 'fs';

import { MulterOptions } from '@nestjs/platform-express/multer/interfaces/multer-options.interface';

const createFolder = (folder: string) => {
  try {
    console.log('💾 Create a root uploads folder...');

    fs.mkdirSync(path.join(__dirname, '..', `uploads`)); //폴더를 만드는 명령어
  } catch (error) {
    console.log('The folder already exists...');
  }

  try {
    console.log(`💾 Create a ${folder} uploads folder...`);

    fs.mkdirSync(path.join(__dirname, '..', `uploads/${folder}`)); //폴더 생성
  } catch (error) {
    console.log(`The ${folder} folder already exists...`);
  }
};

const storage = (folder: string): multer.StorageEngine => {
  createFolder(folder); // 폴더 만들고

  return multer.diskStorage({
    //옵션을 써준다.
    destination(req, file, cb) {
      //* 어디에 저장할 지

      const folderName = path.join(__dirname, '..', `uploads/${folder}`);

      cb(null, folderName); //cb에 두번째 인자가 어디에 저장할지다.
    },

    filename(req, file, cb) {
      //* 어떤 이름으로 올릴 지

      const ext = path.extname(file.originalname); //파일을 올려서 확장자를 추출한다.

      const fileName = `${path.basename(
        file.originalname,

        ext,
      )}${Date.now()}${ext}`;

      cb(null, fileName);
    },
  });
};
//multerOptions을 컨트롤러에서 사용해서 업로드 한다.
export const multerOptions = (folder: string) => {
  const result: MulterOptions = {
    storage: storage(folder),
  };

  return result;
};

main.ts 파일에서 설정 추가

//app이 Express어플리케이션인것을 제네릭으로 명시
const app = await NestFactory.create<NestExpressApplication>(AppModule);

//http://localhsot:8000/media/cats/aaa.png
//prefix 는 static파일앞에 /media를 붙여준다.
 app.useStaticAssets(path.join(__dirname, './common', 'uploads'), {
    prefix: '/media',
  });

controller

 @UseInterceptors(FilesInterceptor('image', 10, multerOptions('cats')))
  @UseGuards(JwtAuthGuard)
  @Post('upload')
  uploadCatImg(
    @UploadedFiles() files: Array<Express.Multer.File>,
    @CurrentUser() cat: Cat,
  ) {
    return this.catsService.uploadImg(cat, files); // 첫번째 인자는 로그인된 인자
  }

service

//파일 업로드 서비스
  async uploadImg(cat: Cat, files: Express.Multer.File[]) {
    const fileName = `cats/${files[0].filename}`;

    console.log(fileName);
    const newCat = await this.catsRepository.findByIdAndUpdateImg(
      cat.id,
      fileName,
    );
    return newCat;
  }

repository

//이미지 업로드 메서드
  async findByIdAndUpdateImg(id: string, fileName: string) {
    const cat = await this.catModel.findById(id);
    cat.imgUrl = `http://localhost:8000/media/${fileName}`;
    const newCat = await cat.save();
    return newCat.readOnlyData;
  }