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

nextjs에서 react-quill에서 이미지 업로드 시 nestjs에서 multer로 이미지 받아서 저장하려고 하는데 개발 초보라 아무리 구글링해도 왜 안되는지 모르겠네요 ㅜㅜ

포스트맨에서 nest.js upload api 보내면 정상적으로 파일 저장 되는데 next.js에서 upload 요청 보내면 nest.js에서 file이 undefined 출력됩니다.

QuillEditor.tsx에서 const file = input.files[0] 콘솔로 찍어보면 아래 이미지처럼 표시되는데 이거 formdata 제대로 생성된게 맞나요?

구글링하면서 몇시간 테스트해도 안되네요. 포스트맨에서 요청하면 정상적으로 되는거 보면 next.js 쪽 문제 맞는거 같은데 아무리 구글링해봐도 이유를 모르겠네요..

QuillEditor.tsx

"use client";
import ReactQuill from "react-quill";
import { useMemo, useRef, useState } from "react";
import "react-quill/dist/quill.snow.css";
import imgUpload from "./imgUpload";

export default function QuillEditor() {
  const [content, setContent] = useState("");
  const quillRef = useRef(null);

  const imageHandler = () => {
    const input = document.createElement("input");
    input.setAttribute("type", "file");
    input.setAttribute("accept", "image/*");
    input.click();

    input.onchange = async () => {
      const file = input.files[0];

      // 현재 커서 위치 저장
      // const range = getEditor().getSelection(true);
      // const range = quillRef.selection;

      // 서버에 올려질때까지 표시할 로딩 placeholder 삽입
      // quillRef.getEditor().insertEmbed(range.index, "image", `'로딩중'`);

      const formData = new FormData();
      formData.append("file", file);
      try {
        // console.log(formData.get("file"));

        // console.log(url);
        // quillRef.getEditor().deleteText(range.index, 1);
        // quillRef.getEditor().insertEmbed(range.index, "image", url);
        // quillRef.getEditor().setSelection(range.index + 1);
        const result = await imgUpload(formData);

        // console.log(result);
      } catch (error) {
        console.log(error);
      }
    };
  };

  const modules = useMemo(() => {
    return {
      toolbar: {
        container: [
          [{ size: ["small", false, "large", "huge"] }],
          [{ header: "1" }, { header: "2" }, { font: [] }],
          [{ align: [] }],
          ["bold", "italic", "underline", "strike"],
          [
            { list: "ordered" },
            { list: "bullet" },
            { indent: "-1" },
            { indent: "+1" },
          ],
          [
            {
              color: [],
            },
            { background: [] },
          ],
          ["link", "image", "video"],
        ],
        handlers: { image: imageHandler },
        clipboard: {
          matchVisual: false,
        },
      },
    };
  }, []);

  const formats = [
    "font",
    "header",
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "list",
    "bullet",
    "indent",
    "link",
    "align",
    "color",
    "background",
    "size",
    "h1",
    "image",
    "video",
  ];

  return (
    <>
      <div>
        <ReactQuill
          ref={quillRef}
          style={{ width: "800px", height: "600px" }}
          modules={modules}
          formats={formats}
          onChange={(e) => {
            setContent(e);
            console.log(e);
          }}
          // onChange={setContent}
          theme="snow"
        />
      </div>
    </>
  );
}

imgUpload.ts

import axios from "axios";

export default async function imgUpload(file: any) {
  console.log(file.get("file"));

  const result = await axios
    .post(
      `${process.env.NEXT_PUBLIC_API_SERVER}/files/upload`,
      {
        file,
      },
      {
        headers: {
          // Accept: "image/*",
          "Content-Type": "multipart/form-data",
        },
      }
    )
    .then((res) => {
      return res.data;
    });

  console.log(result.data);

  return result;
}

nest.js

  @Post('upload')
  @UseInterceptors(FileInterceptor('file'))
  async uploadFile(
    @UploadedFile() file: Express.Multer.File,
  ) {
    console.log(file);
    // return await this.filesService.fileUpload(files);
  }