스프링 게시판 - ckeditor4 (ck에디터)연동 - 가비지이미지 삭제 (3)

2023.03.25 - [Spring] - 스프링 게시판 - ckeditor4 (ck에디터)연동 - 이미지업로드 (2)

 

ckeditor로 올리는 사진 첨부는 파일 업로드를 하고 나서 이미지 src를 본문에 넣어 보여주는 형태이다.
문제는 글을 최종 저장할 때 본문에 사진을 삭제하면 기존에 업로드했던 이미지 파일에 대해 삭제할 수 있는 기능이 없다.
실제 저장하는 이미지와 본문에서 삭제한 이미지를 처리하는 방법을 포스팅하겠다.

 

1. 사진을 업로드할때 마다 변수에 파일정보를 담기 (파일업로드 후 실행하는 콜백함수 이용)

//이미지 첨부파일 정보
let originImgFileList = [];

//이미지 업로드가 끝나고 실행하는 함수
CKEDITOR.on( 'dialogDefinition', function( ev ) {
    let dialogName = ev.data.name;
    let dialogDefinition = ev.data.definition;
    
    let uploadTab = dialogDefinition.getContents( 'Upload' );
    let uploadButton = uploadTab.get('uploadButton');
    
    uploadButton['filebrowser']['onSelect'] = function( fileUrl, errorMessage ) {

        //글 작성후 업로드한 이미지정보를 를 담는다.
        if(fileUrl){
           originImgFileList.push(fileUrl);
        }
    }

});

uploadButton 함수는 이미지 파일업로드 성공 콜백 함수다. 

콜백 파라미터 fileUlr에는 이미지 업로드 정보가(경로+파일명) 담겨있다.

이미지를 업로드할때 마다 fileUlr 값을 originImgFileList 배열에 넣는다.

 

2. 최종 본문글 저장시 삭제 이미지정보 체크(front - javascript 로 처리)

 

아래의 변수를 출력하면 현시점의 에디터 본문 내용이 담겨 있다.

CKEDITOR.instances.ckeditor.getData());

저장버튼 누를때 이 본문내용에서 src주소를 추출하여 업로드할때 이미지 주소를 비교하여 삭제대상 이미지정보를 추출한다.

 

3. 본문에서 src 정보를 추출하는 함수 작성

let realImgFileList = []; //본문내용에서 추출한 이미지 정보 (다수가 존재할 수 있기 때문에 배열)

/*
* 에디트내용에서 이미지 주소만 추출하기
*/
function extractImageTags(editorContent) {

    const container = document.createElement("div");

    container.innerHTML = editorContent;

    const images = container.getElementsByTagName("img");

    for (let i = 0; i < images.length; i++) {
        realImgFileList.push(images[i].src.replace(/http:\/\/localhost:8080/g, ""));
    }
}

 

위의 함수는 본문내용 중 src 태그 엘리먼트를 찾아 src값을 찾는 방법이다.

replace를 하는이유는 실제 이미지 경로는 도메인 이후부터 이기때문에 도메인 부분은 공백처리한다.

ex) http://localhost:8080/image/upload/file.jpg  ➞  /image/upload/file.jpg

 

4.  A, B배열 비교 후 중복 없는 것 추출하기

//한쪽에만 있는 배열의 값을 추출한다.
function getDifference(array1, array2) {
    return array1.filter(element => !array2.includes(element))
    .concat(array2.filter(element => !array1.includes(element)));
}

 

originImgFileList 배열 > 이미지를 업로드할 때 마다 정보를 쌓은 배열

realImgFileList 배열 > 실제 본문에 있는 이미지 정보 배열

 

위의 배열 2개를 비교하여 얻은 결과값이 최종 삭제대상 이미지 정보이다.

 

5. 최종삭제대상 배열 서버로 전송

let deleteImgFileList = getDifference(originImgFileList, realImgFileList);

deleteImgFileList 변수에 담은 삭제파일 정보를 본문글 저장할 때 vo에 넣어 서버로 전송하여 파일 삭제처리를 한다.

 

6. 서버에서의 처리

게시판 bbsVo.java

@Data
public class BbsDto {
    .....
    .....
    /*게시판 제목*/
    private String title;
    /*게시판 내용*/    
    private String content;
    /*이미지 삭제 목록*/
    private List<String> deleteImageList;

}

========================================================================

게시판 bbsService.java

if(bbsVo.getDeleteImageList() != null) {
    System.out.println("저장-삭제대상 이미지 수 : "+bbsVo.getDeleteImageList().size());
    bbsService.deleteImageList(bbsVo); //물리적파일을 지우는 로직, java.io.File의 delete 메서드이용
}

vo에 이미지삭제정보를 담아 서버에서 이미지 삭제정보가 있을 시 삭제 로직을 수행하면된다.

 

이런식으로 처리하면 가비지 이미지파일을 처리할 수 있다.