如何解決vue-quill-editor上傳內容由于圖片是base64導致字符太長的問題

小編給大家分享一下如何解決vue-quill-editor上傳內容由于圖片是base64導致字符太長的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

vue-quill-editor是個較為輕量級富文本框，相較于ueditor，開發更編輯，更加直觀，如果大家伙在需求允許的情況下，還是會比較建議使用vue-quill-editor。

vue-quill-editor的使用方法在這邊就不多說了，大家網上查下，一抓一大把

但是在使用vue-quill-editor有一個致命的問題，vue-quill-editor默認插入圖片是直接將圖片轉為base64再放入內容中，如果圖片比較大的話，富文本的內容就會很大，即使圖片不大，只要圖片較為多，篇幅較長，富文本的內容也是異常的大的，這就會給大家帶來一些煩惱，我們可能更希望在提交富文本的內容的時候圖片只是以圖片地址提交，那這樣一來我們要怎么去處理呢，接下來大家可以來理一理

還是老思路，既然我們可以希望不是直接將圖片轉成base64，那么我們可以采用選擇完圖片，即將圖片上傳服務器，服務器返回相應的圖片鏈接，前端將圖片鏈接插入到富文本的指定光標上即可，這樣一來就可以實現我們的想要的效果了

首先，新建富文本組件QuillEditor.vue，利用iview的上傳組件來上傳選擇完的圖片（當然，其他的上傳組件也是ok的）

<Upload
    id="iviewUp"
     ref="upload"
     :show-upload-list="false"
     :on-success="handleSingleSuccess"
     :format="['jpg','jpeg','png']"
     :max-size="2048"
     :headers="header"
     :on-format-error="handleFormatError"
     :before-upload="handleBeforeUpload()"
     type="drag"
     :action="serverUrl"
     >
     <div >
       <Icon type="ios-camera" size="50"></Icon>
     </div>
   </Upload>
   <!--<Row>-->
    <quill-editor 
     v-model="detailContent" 
     ref="myQuillEditor" 
     :options="editorOption" 
     @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
     @change="onEditorChange($event)">
    </quill-editor>
   <!--</Row>-->

看到上面的代碼有的的就會有疑問了，那上傳好的圖片要怎么插到富文本的指定光標里面呢，別慌，面包會有的，往下看，

handleSingleSuccess (res, file) {
   // res為圖片服務器返回的數據
   // 獲取富文本組件實例
   let vm = this
   let quill = this.$refs.myQuillEditor.quill
   console.log('res---', vm.$refs.myQuillEditor.quill.getSelection())
   // 如果上傳成功
   if (res.res_code === '1') {
     // 獲取光標所在位置
     let length = quill.getSelection().index;
     // 插入圖片 res.info為服務器返回的圖片地址
     quill.insertEmbed(length, 'image', res.result.url)
     // 調整光標到最后
     quill.setSelection(length + 1)
   } else {
     vm.$Message.error('圖片插入失敗')
   }
   // loading動畫消失
   this.quillUpdateImg = false
  }

通過 this.$refs.myQuillEditor.quill.getSelection().index獲取光標所在位置，將圖片地址放在該位置即可

這樣一來萬事俱備，只欠東風了，這個時候大家會發現，那iview這個上傳組件在頁面上呢，我怎么實現點擊富文本上的上傳圖片的按鈕調用iview的上傳組件的方法呢，

這個時候我們就要用到富文本中的配置屬性editorOption，對editorOption進行圖片上傳的點擊事件進行相應的配置即可，詳情看下面代碼

 editorOption: { // 富文本框配置
     placeholder: '',
     theme: 'snow', // or 'bubble'
     modules: {
       toolbar: {
         container: toolbarOptions, // 工具欄
         handlers: {
           'image': function (value) {
 

if (value) {
               document.querySelector('#iviewUp input').click()
             } else {
               this.quill.format('image', false);
             }
           }
         }
       }
     }
   }

 document.querySelector('#iviewUp input') 這個就是相應的dom節點的點擊事件，將其綁在富文本的圖片按鈕點擊事件上好了。

以上是“如何解決vue-quill-editor上傳內容由于圖片是base64導致字符太長的問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！