[php] toast ui web editor base64제거 및 url코드로 변경

 

  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<script>
const Editor = toastui.Editor;
const editor = new Editor({
  el: document.querySelector('#editor'),
  height: '500px',
  previewStyle:"vertical",
  initialEditType:"wysiwyg",
  hooks: {
  addImageBlobHook: (blob, callback) => {
  	const upload = uploadImage(blob); // 나의 경우 할당이 안되서 그냥 함수 호출하고, 외부 변수에 넣어서 CALLBACK 호출
  	callback(upload, "alt text");
    // callback(dataImagurl, "alt text"); // 나의 경우 이렇게 해결!
  	}
  }
});
let dataImagurl;
Function uploadImage(blob) {
    let formData = new FormData();
    formData.append('image', blob); // 이미지를 폼데이터 file로 변경 'image'가 input name이다.
    $.ajax({
     	url : '작업용 controler.php',
        enctype: 'multipart/form-data', 
        type: 'POST',
        data: formData,
        processData: false,    
        contentType: false,
        async: false, // 비동기를 동기로 변경.
    })
    .done(function(data) {
    	return data; // 보통은 이건데, 나의 경우 할당이 안되더라.
        // dataImagurl = data;
        // return dataImagurl;
    })
    .fail(function(err) {
    	alert(err);
    });
 };
</script>

// 작업용 컨트롤러 서버측이다.
<?php?

$tmpName = $_FILES['image']['tmp_name']; // 파일의 임시 이름
$originName = $_FILES['image']['name'];  // 파일의 실제 이름


$fileName = iconv('UTF-8', 'EUC-KR', $originName); // 한글을 안깨지게 바꿔주는건데, 난 오히려 깨지더라.
$folder = '../assets/img/'.$originName; // 또는 fileName을 넣어도 되는 것 같다.
$mid = move_uploaded_file($tmpName, $folder); // 여기서 해당 서버에 업로드하는 함수를 쓰면된다.
//  move_uploaded_file은 그냥 임시파일을 해당 폴더로 옮겨주는 명령어
if($mid == true) {
	echo 123; // 임시파일을 실제 폴더로 이동시켜주는 것이 성공했는지 여부를 판별해준다. 개발용 체크 코드.
    // 여기서 프론트로 url을 던져준다.
    echo '/asset/img/'.$originName;
} else {
	echo 456;
    // echo '업로드 실패!';
}


?>

약간 코드 생략도 되긴했지만 기능적 생략이 아닌 응답값 생략이다.
실패시 alert를 받을 부분 처리 하는건데, 뭐 안되더라도 정상적으로 작동하게 짰다.

 

toast ui 이미지 업로드 base64를 url로 변경했다.

 

++ 해당 코드는 이미지를 base64로 업로드하고 같은 서버내 폴더로 이동하는 명령어이고, move_uploaded부분을 해당 이미지 서버에 적용되는 함수로 세팅하면 url을 뱉는다.