Quill에 올린 이미지를 서버로 옮기기

Quill 에 이미지를 업로드 하면, base64 url로 바뀌어서 올라옵니다. 이것을 바로 mysql에 저장을 하면 줄 수가 길어서 그런지 몰라도(?) 저장이 안됩니다.

이미지를 서버에 저장하고, 이것을 다시 화면에 보여주기 위해서 Quill의 모듈을 바꿀 필요가 있습니다.

먼저, quill인스턴스에 접근을 합니다.

const quillIns = useRef();
quillIns.current = new Qull(..);
// .. 은 앞에 게시물에 있습니다.
quillIns.current.getModule('toolbar');
toolbar.addHandler('image', onClickImageBtn);

const imageRef = useRef();

const onClickImageBtn = useCallback(() => {
      imageRef.current.click()
  },[imageRef.current])  
}

const onChangeImageInput = () => {
      const imageFormData = new FormData();
      [].forEach.call(e.target.files, (f) => {
          imageFormData.append('image', f)
      });
      dispatch({
          type : UPLOAD_IMAGES_REQUEST,
          data : imageFormData
      })
}

<input hidden type="file" onChange={onChangeImageInput} ref={imageRef}/>

이런 식으로 backend 단에서 , MULTER를 이용하여 서버에 올립니다.

서버에서 filename을 retrun 해주고 그것을 redux를 이용해서 받아 옵니다.

case UPLOAD_IMAGES_SUCCESS :
	return {
    	...state,
      	image : state.image.concat(action.data)
    }

quillIns.current.root.innerHTML = quillIns.current.root.innerHTML + `<img src="http://localhost:3001/${v}"/>`

quillIns.current.root.innerHTML는, quill 에디터 안에 있는 html인데, 이것을 직접 조작을 할 수 있습니다. (글을 쓰면 Input태그에서 onChange, value를 이용 한것 처럼 계속 값이 바뀜)

이런식으로 quill 의 html에 이미지를 html 태그로 넣어주면 됩니다. 그러면 성공!