본문 바로가기

카테고리 없음

[React]tui-editor 이미지 등록 이벤트

<Editor

              previewStyle="vertical"

              height="300px"

              initialEditType="wysiwyg"

              placeholder="가장 마지막 사진이 썸네일로 자동저장됩니다."

              hooks={{

 

                addImageBlobHook: async (blob, callback=> {

                  const upload = await this.uploadImage(blob);

                  callback(upload, "alt text");

                  return false;

                }

            }}

            />

 

///

 

uploadImage(blob) {

    let formData = new FormData();

    formData.append('image', blob);

    return axios('http://localhost:3001/imageupload', {

        method: 'POST',

        data: formData,

        headers : {'Content-type' : 'multipart/form-data' }

    }).then(response => {

        if (response.data) {

          if(this.state.thumbnailcheck === 0) {

            this.setState({

              thumbnailchekc : 1,

              thumbnail : response.data

            })

          }

            return response.data;

        }

        throw new Error('Server or network error');

    });

};

 

onAddImageBlob(blob, callback) {

    this.uploadImage(blob)

        .then(response => {

            if (!response) {

                throw new Error('Validation error');

            }

            else callback(response, "alt text");

        }).catch(error => {

            console.log(error);

        });

};