인프런 커뮤니티 질문&답변

 안녕하세요 윤상석님. 윤상석님께서 멀터 강의를 하실 때 사용하신 코드를 제가 잘 재구성해서 사용하고 있습니다.

// multer.config.ts

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

import * as fs from "fs";
import * as path from "path";
import * as multer from "multer";

export class MulterConfig {
  static createFolder(folder1: string, folder2: string) {
    const logger = new Logger("Multer");

    try {
      logger.log("create uploads folder");
      fs.mkdirSync(path.join(__dirname, "../../../uploads"));
    } catch (err) {
      logger.log("uploads folder is already exist");
    }

    try {
      logger.log(`create ${folder1}folder into uploads foler`);
      fs.mkdirSync(path.join(__dirname, `../../../uploads/${folder1}`));
    } catch (err) {
      logger.log(`${folder1} is already exist`);
    }

    try {
      logger.log(`create ${folder2}folder into uploads folder`);
      fs.mkdirSync(path.join(__dirname, `../../../uploads/${folder2}`));
    } catch (err) {
      logger.log(`${folder2} is already exist`);
    }
  }

  static storage(folder: string): multer.StorageEngine {
    return multer.diskStorage({
      destination(req, file, cb) {
        const folderName = path.join(__dirname, `../../../uploads/${folder}`);

        cb(null, folderName);
      },
      filename(req, file, cb) {
        const ext: string = path.extname(file.originalname);

        const fileName = `${path.basename(
          file.originalname,
          ext,
        )}-${Date.now()}${ext}`;

        cb(null, fileName);
      },
    });
  }

  static apply(folder: string) {
    const result: MulterOptions = {
      storage: this.storage(folder),
    };
    return result;
  }
}

 그리고 이미지 등을 업로드를 할때 다음과 같은 코드를 사용합니다.

// upload.controller.ts

import {
  Controller,
  Get,
  Post,
  Body,
  Patch,
  Param,
  Delete,
  UseGuards,
  UseInterceptors,
  UploadedFile,
  Res,
} from "@nestjs/common";
import { UploadService } from "../../upload/services/upload.service";
import { ImageReturnDto } from "../../upload/dto/image-return.dto";
import { IsLoginGuard } from "src/common/guards/isLogin.guard";
import { MulterConfig } from "src/common/config/multer.config";
import { FileInterceptor } from "@nestjs/platform-express";
import { GetDecodedJwt } from "src/common/decorators/get-decoded-jwt.decorator";
import { JwtPayload } from "src/common/interfaces/jwt-payload.interface";
import { JSON } from "../../../common/interfaces/json-success.interface";
import { Response } from "express";
import { CookieOption } from "src/common/config/etc";
import { ProductImageCookieKey } from "./../../../common/config/etc";
import { IsAdmin } from "src/common/decorators/isAdmin.decorator";

@Controller("upload")
export class UploadController {
  constructor(private readonly uploadService: UploadService) {
    MulterConfig.createFolder("image", "video");
  }

  @UseGuards(IsLoginGuard)
  @UseInterceptors(FileInterceptor("image", MulterConfig.apply("image")))
  @Post("/image-for-product")
  async uploadImgForProduct(
    @IsAdmin()
    @UploadedFile()
    file: Express.Multer.File,
    @GetDecodedJwt() jwtPayload: JwtPayload,
    @Res() res: Response,
  ): Promise<JSON<ImageReturnDto>> {
    console.log("logging image info ->\n", file);

    const result = await this.uploadService.uploadImgForProduct(
      file,
      jwtPayload,
    );

    res.cookie(ProductImageCookieKey, result.url, CookieOption);

    return {
      statusCode: 201,
      message: "사진을 업로드 하였습니다.",
      result,
    };
  }
}

 상품 사진을 업로드 하기 위해서 만든 코드인데 상품에 사진 하나만 사용하기 위해 FilesInterceptor대신 FileInterceptor를 사용했습니다. 그리고 폴더를 만드는 메서드는 분리해서 따로 사용합니다. 포스트맨 등으로 해당 api에 사진을 formData에 담고 이미지를 아래 처럼 키값으로 담았습니다. 해당 이미지는 그림으로 배우는 SQL 입문이라는 책의 표지입니다.

 요청을 보내면 아래에 storage 메서드에 콜백 함수안에 제가 브레이크 포인트를 걸어두어 저쪽에 도달합니다.

 storage 메서드를 실행하고 이제 컨트롤러에 도달하면 uploads/image 디렉터리에 사진이 저장됩니다.

이미지를 열어보면 정상적으로 불러와집니다.

근데 문제가 @UploadedFile()데코레이터를 file에 붙여 주었고 타입을 Express.Multer.File로 붙여 주었는데도 file을 콘솔로찍으면 undefined가 나옵니다.

어디가 문제인지 알 수 있을까요?

그리고 번외로 상품을 만든다고 가정할 때 body에 form 데이터와 raw/json값을 동시에 담지 못해서 저는 먼저 이미지를 업로드 하고 이미지의 url을 쿠키로 보내어서 상품 정보를 만드는 컨트롤러에서 쿠키에 있는 url과 상품 정보를 같이 데이터베이스로 보내서 상품 하나를 만듭니다. 혹시 이런방법이 실무등에서 쓰이게 되나요? 아니면 더 좋은 방법이 있을까요?