toast-ui/vue-editor 사용 시, 파일을 S3에 업로드하기

출처: https://ui.toast.com/tui-editor

 

프로젝트 진행 중, 마크다운 에디터로  toast-ui/vue-editor를 사용하고 있는데,

해당 에디터에서 사진 파일 업로드 시 Base64 형태로 반환된다.

Base64 이라 길이가 엄청 길기 때문에, s3에 업로드하고 해당 url을 content에 저장하는 방법으로 변경하였다.

이렇게 엄청 길게 들어가게 돼서, 조금만 용량 큰 사진을 업로드하면 아래와 같이 413 오류가 떴다.

 

그래서 변경한 방법

<Editor ref="toastEditor" 
        initialEditType="wysiwyg" 
        previewStyle="vertical"
        :options="options" />

<script>
    import { Editor } from '@toast-ui/vue-editor'
	import '@toast-ui/editor/dist/toastui-editor.css' // Editor style
    
    data(){
        return{
            options: {
                language: "ko",
                hooks: {
                  addImageBlobHook: this.onUploadImage
                }
              },
        }
    },
   components: {
    Editor
  	},
   methods: {
        async onUploadImage(blob, callback) {
      const formData = new FormData();
      formData.append('file', blob);

      try {
        const imageUrl = await this.saveImage(formData);
        callback(imageUrl);
      } catch (error) {
        console.error('이미지 업로드 오류:', error);
        throw error;
      }
    },
    async saveImage(formData) {
      try {
		// 업로드 하는 코드
        return imageUrl;
      } catch (error) {
        console.error('이미지 업로드 오류:', error);
        throw error;
      }
    },
   }
</script>

Vue.js와 Toast UI Editor를 사용하는 경우엔 바로 hooks 옵션을 주니 인식이 되지 않아서

이런식으로 options 에서 hooks 메소드를 추가했다.

( Toast UI Editor는 Vue.js와 함께 사용될 때, 옵션을 정의하기 위해 `options` 객체를 사용한다고 함)

 

해당 위치에 url이 반환되어 저장된 모습을 볼 수있다!😊

 

node와 vue를 연동한 프로젝트에서 presigned url을 적용한 s3 업로드는 아래에 게시되어 있다!

2023.05.22 - [JavaScript/Node] - [Node.js] AWS S3에 presigned Url을 받아 업로드하기

[Node.js] AWS S3에 presigned Url을 받아 업로드하기

2023.05.22 - [AWS] - [S3] S3란? 버킷 생성 후 정책 설정하기

[S3] S3란? 버킷 생성 후 정책 설정하기