[LogicList]Toast Ui Editor 이미지 URL 삽입방법과 문제점

Toast UI Editor를 통한 게시글 편집 및 이미지 업로드

사용 간 문제점

1. 이미지 업로드 시 기존 Base64방식 DB저장이 아닌 이미지 URL 변환 후 저장 필요
2. 이미지 URL 변환 후 본문 삽입 필요

---

이미지 업로드 시 기존 Base64방식 DB저장이 아닌 이미지 URL 변환 후 저장 필요 && 이미지 URL 변환 후 본문 삽입

AWS S3 사용 (다른 게시글에서 사용 법 작성예정)

      //Image Upload
        editor.addHook('addImageBlobHook', (blob, callback) => {
            const formData = new FormData();
                formData.append("data", blob);
                fetch(location.origin.toString()+"/image-upload", {
                    method: 'POST',
                    cache: 'no-cache',
                    body: formData // body 부분에 폼데이터 변수를 할당
                })
                .then((response) => response.json())
                .then((data) => {
                    //Callback 함수를 통한 이미지 본문삽입 
                    callback(data.result);
                });
            return false;
            })

이미지 데이터를 AWS S3에 저장 후 URL을 리턴 받는다.
반환받은 data를 콜백함수를 통해 이미지URL를 본문에 삽입받을 수 있다.

후에 게시글 작성완료 이벤트 시 editor.getMarkdown()을 통해 본문 내용과 이미지 URL를 전달한다.

 

        function upload(){
            let formData = new FormData();
            formData.append('content',editor.getMarkdown());
            formData.append('title',document.getElementById('title').value);
            console.log(editor.getMarkdown());
            fetch(location.href.toString(), {
                method: 'POST',
                cache: 'no-cache',
                body: formData // body 부분에 폼데이터 변수를 할당
            })
            .then((response) => response.json())
            .then((data) => {
               if(data.result=="success"){
                alert("성공")
                location.href="/view/main/";
               }
               else if(data.result=="failed"){
                alert("실패")
               }
            });

        }