Base64 Image를 Javascript File객체로 변환

회사에서 운영중인 사이트에 사용자가 게시글을 입력하는 기능이 있습니다.

 

웹에디터를 따로 사용하지 않고 contentseditable 을 이용하여 에디터 처럼 사용하고 있는데,

 

여기에 이미지 파일을 첨부파일 형태로 올리거나, 다른 사이트의 이미지를 복사해서 붙여넣는것도 가능한데 생각지도 못한 부분에서 예외 상황이 발생했습니다.

 

그렇습니다. Base64였습니다.

 

Base64로 등록된 Image tag

 

PC 카카오톡 방에 있는 사진 파일을 내려받아서 올리는게 아닌 복사해서 붙여넣고 글 작성을 했더니 Base64 형태로 이미지가 전송되었는데, 서버로 전송된 요청이 연관된 connector에 설정된 maxPostSize의 한계치를 초과하는 파라미터 데이터로 전송되게 되었습니다.

 

이를 서버에서 수정을 할지 Front에서 수정을 할 지 고민을 해 보았는데 Front에서 수정하기로 하였습니다.

이유는 크게 3가지였는데,

 

1. maxPostSize를 수정하려면 tomcat을 건들여야했는데 위 문제때문에 tomcat 설정을 변경하는것은 현재 사정상 좋은 방법은 아닌것 같았습니다.

 

2. 등록된 게시글의 image 파일들은 서버에 내재화를 하도록 하고 있는데, 만약 톰켓 설정을 건든다고 하더라도 Base64를 Image파일로 변환작업을 하려면 (현재 backend는 java8에 Spring을 사용중이다.) java.xml.bind.DatatypeConverter를 사용하게 될 텐데 이 DatatypeConverter가 java9 이후로 jdk외부로 빠져나갔다. 이는 회사에서 java 버전을 8버전에서 17버전으로 옮겨가고 있는 중인데 이점은 이후 이슈가 될 수도 있고 다른 라이브러리를 찾을 시간이 그리 많이 않았습니다.

 

 

위와 같은 이유로 화면단에서 file객체로 변환하고 서버로 전송하도록 했습니다.

 

 

Base64 Data를 file 객체로 변환하는 함수는 아래와 같습니다.

   function base64toFile (base_data, filename) {
        let arr = base_data.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);

        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }

        return new File([u8arr], filename, {type: mime});
    }

 

// img tag중 base64 img Tag만 select
document.querySelectorAll("img[src^='data:image']");

 

게시글 등록 전 본문 영역 내의 Image Tag중 Base64형태의 img Tag 를 querySelecorAll을 통해서 읽어온 후 위 함수를 통해 파일 객체로 변환했습니다.