[ckEditors5] ckEditors5 이미지 못 불러오는 오류 feat. <figure class="image"><img></figure>

문제상황 : ckEditor5에서 이미지 업로드 후에 이미지를 못 불러옴

디비에는 img src 경로 없이 <figure class="image"><img></figure> 으로 저장됨

 

 

문제 원인 : uploadAdapter.js 에서 upload 시에 제대로 기능을 수행하지 못함

 

 

uploadAdapter.js 

기존 코드

   upload() {
      return this.loader.file.then( file => new Promise((resolve, reject) => {
         this._initRequest();
         this._initListeners( resolve, reject, file );
         this._sendRequest( file );
      }));
   }

 

 

변경 코드

upload() {
    var reader  = new FileReader();

    return new Promise( ( resolve, reject ) => {
        reader.addEventListener( 'load', () => {
            resolve( { default: reader.result } );
        });

        reader.addEventListener( 'error', err => {
            reject( err );
        });

        reader.addEventListener( 'abort', () => {
            reject();
        });                    

        this.loader.file.then( file => {
            reader.readAsDataURL( file );
        });                        
    })
}

해당 코드를 보면, 이미지를 FileReader를 사용하여 Base64 형식으로 변환하여 업로드하는 방식으로 변경되었습니다. FileReader를 사용하면 클라이언트 측에서 이미지 파일을 읽어 Base64로 변환하고, 이를 서버에 업로드할 수 있습니다. ​

upload() 함수에서 FileReader를 사용하여 이미지 파일을 Base64로 변환하고, 해당 Base64 데이터를 서버로 전송하는 것으로 보입니다. 따라서 서버에서는 Base64 형식의 데이터를 해석하여 이미지 파일로 저장하거나, 필요에 따라 다른 처리를 할 수 있습니다. ​ 클라이언트 측에서 FileReader를 사용하여 Base64로 변환한 데이터를 서버로 전송하기 때문에, ckImageUpload.do 컨트롤러에서는 Base64 형식의 데이터를 얻어와서 처리해야 합니다. 이를 위해 Multipart 형식으로 전송된 Base64 데이터를 파싱하고 처리하는 로직을 구현해야 합니다. ​

주어진 코드로는 서버 측 로직이 없기 때문에 정확한 처리 방법을 알 수는 없습니다. 서버 측에서는 Base64 데이터를 받아서 적절한 방식으로 이미지로 변환하고 저장하는 로직을 추가해야 합니다. ​

예를 들어, Spring 컨트롤러에서 Base64 데이터를 이미지로 변환하고 저장하는 방법은 다음과 같을 수 있습니다. (Spring 컨트롤러가 아닌 다른 환경을 사용하는 경우 해당 환경에 맞게 처리해야 합니다.)