[ckeditor5] 이미지 src값 저장되지 않는 경우 (feat. <figure class="image"><img></figure>)

문제상황

: ckedtior5에서 이미지를 업로드 후 DB에 저장 시 src값이 저장이 되지 않는 현상

 

원인

: upload할 때 함수가 문제가 있어서 다른 함수로 변경해줌

 

 

문제해결 흐름

1. 기존에 UploadAdapter.js라는 파일 열기

 

 

 

2.  아래와 같은 upload 부분 찾기

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

 

 

3. 아래 코드로 변경해주기

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 컨트롤러가 아닌 다른 환경을 사용하는 경우 해당 환경에 맞게 처리해야 합니다.)