[React | Next.js | Node.js] TOAST UI Editor 이미지 업로드

기본적으로 이미지 업로드 기능을 제공한다.

하지만 굉장히 용량이 작은 사이즈만 업로드가 되는 것 같았다. 기준은 정확히 모르겠다.

 

React | Next.js

구글링해보니 기존의 Image Import Hook을 제거한 후 새롭게 저장할 Image Import Hook을 생성하는 방식으로 사용하고 있었다.

  useEffect(() => {
    if (editorRef.current) {
      // 기존 Image Import Hook 제거
      editorRef.current.getInstance().removeHook("addImageBlobHook");

      // 새 Image Import Hook 생성
      editorRef.current.getInstance().addHook("addImageBlobHook", (blob, callback) => {
        (async () => {
          const formData = new FormData();
          formData.append("img", blob);

          const { data: filename } = await Axios.post(
            // 서버에 저장할 로직을 수행하는 API호출
            `${process.env.NEXT_PUBLIC_API_URL}`,
            formData,
            { header: { "content-type": "multipart/formdata" } },
          );
          
          // 이미지가 저장될 서버 경로
          const imageUrl = `${process.env.NEXT_PUBLIC_IMAGE_URL}edit/${filename.filename}`;
          // 미리보기 이미지를 가져옴
          callback(imageUrl, "image");
        })();
        return false;
      });
    }
  }, [editorRef]);

파일을 formData에 담아서 API호출하여 서버로 보낸다.

이 때 formData는 console.log()로 바로 확인되지 않고 빈 객체가 출력되어 제대로 들어간건지 알 수가 없는데,

아래의 코드를 사용하면 확인할 수 있다.

for (var key of formData.keys()) {
  console.log(key);
}

for (var value of formData.values()) {
  console.log(value);
}

https://stackoverflow.com/questions/17066875/how-to-inspect-formdata

 

그리고 이미지를 서버에 업로드하게되면 미리보기 샘플을 가져온다.

위와 같이 에디터내에 미리보기 이미지가 생성됨 ㅎㅎ

크기 조절 기능은 나는 따로 생성하진 않고 그냥 게시글이 작성되면 강제로 width: 100%로 보여지게 css를 설정해두었다. (일단은..;)

 

Node.js

파일 업로드를 위해 multer 라이브러리를 사용한다.

npm install --save multer

const multer = require("multer");

const upload = multer({
  dest: "이미지가 저장될 경로",
  limits: { fileSize: 5*1024*1024 }, // option
});

router.post("/api/fileupload", upload.single("img"), (req, res) => {
  res.json(req.file);
});

위의 코드를 통해 multer의 upload.single에서 formData안의 name이 "img"인 파일을 인식하여 저장해준다.

이때 이름이 같지 않으면 Unexpected field at makeError 에러가 나온다.

이상태로는 이름을 보고 이미지파일을 구분할수는 없겠지만 저장은 잘 된다.

굳이 구분할 필요가 없어 놔두긴 했지만 파일 이름에 업로드시간 정도를 추가하여 중복이 발생하지 않도록 만들어두면 좋긴 하겠다.

 

추가)

여러개의 파일저장 https://www.zerocho.com/category/NodeJS/post/5950a6c4f7934c001894ea83

파일명/경로 수정 https://donghunee.github.io/study/2019/07/25/nodeimg/