vue-quill-editor實現圖片上傳功能，

vue-quill-editor實現圖片上傳功能，

問題描述

  項目使用的vue2.0開發，項目中需要一個富文字編輯器，樓主經過一番心理掙紮選擇了vue-quill-editor。具體如何引用作者在項目中已經寫得很明白了，我在這裡就不再贅述。
  vue-quill-editor插入圖片的方式是將圖片轉為base64再放入內容中，這樣就會產生一個問題，如果圖片比較大的話，富文本的內容就會很大，樓主是將內容存在資料庫中的，這樣一來，一方面會佔用大量的資料庫儲存空間，另一方面當圖片太大的時候富文本的內容，會超過資料庫的儲存上限，從而會產生內容被截斷從而顯示不全的問題（即使是text類型，也有儲存上限65535）。
  那麼問題來了，如何將圖片上傳到自己的伺服器或第三方服務，然後將獲得的圖片url插入到文本中呢？我認為大致有兩個方法，其一是將任務交給服務端，服務端截取base64圖片並轉化為檔案，將其路徑或者url替換原來的圖片資料；其二是對控制項本身下手，首先將圖片上傳，然後插入到富文本中。接下來樓主就開始了自己的踩坑之路。

解決方案

基礎簡介

1.vue-quill-editor是基於quill(github地址)適用於Vue2的富文字編輯器，所以對於quill的原生屬性擴充也是支援的。quill文檔地址

2.quill 中有許多擴充和自訂方法功能。比片的重定義大小、圖片上傳的點擊處理等。

圖片上傳

通過查看quill項目issue。發現其中是有對圖片上傳這方面問題進行考慮和修改的。所以圖片上傳這個方案是可行的。接下來就是如何?。

3.首先我們需要在項目中拿到quill的執行個體。這個在vue-quill-editor項目中有介紹如何擷取。基本方法就是通過ref擷取你的vue-quill-editor執行個體，再擷取quill執行個體，代碼如下。其中newEditor就是我的vue-quill-editor

 this.$refs.newEditor.quill

4.在拿到執行個體後我們需要考慮如何圖片上傳並將url插入文本中。通過尋找發現可以註冊一個自訂的圖片處理函數，當頂部的工具列中的圖片按鈕被點擊的時候，就會觸發這個函數。然而在實際使用中你會發現這個函數並不像文檔中所說的接收（image, callback）兩個參數，image是你的圖片，你只需要在callback中將傳入處理後的url就可以。而是接收一個參數state，當被點擊時就會觸發這個函數，並傳入state值----true。這裡首先介紹一下，如何註冊這個處理函數-imgHandler。這裡要注意，註冊函數要寫在mounted生命週期鉤子裡。

mounted() {var vm =this var imgHandler = async function(state) { if (state) {  //button is clicked } } vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)}

5.通過在stackflow查閱，發現就只能在imgHandler中自己實現點擊上傳和插入的功能。這樣就在editor下面寫一個不顯示的input，並監聽變化上傳圖片，擷取其執行個體，當imgHandler被點擊時，類比input按鈕被點擊。代碼變成如下樣本。

 mounted() {  var vm =this  var imgHandler = async function(image) {  vm.addImgRange = vm.$refs.newEditor.quill.getSelection()  if (image) {   var fileInput = document.getElementById(vm.uniqueId) //隱藏的file文本ID   fileInput.click() //加一個觸發事件  }  }  vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler) }

6.最後是input的點擊上傳和圖片url的插入。

HTML代碼

 <div  v-loading="imageLoading"  element-loading-text="請稍等，圖片上傳中">  <quill-editor  ref="newEditor"  :options="newOption"  style="height: 200px; margin-bottom: 54px"  v-model="editorContent"  @change="editorChange">  </quill-editor>  <form action="" method="post" enctype="multipart/form-data" id="uploadFormMulti">  <input style="display: none" :id="uniqueId" type="file" name="avator" multiple accept="image/jpg,image/jpeg,image/png,image/gif" @change="uploadImg('uploadFormMulti')"><!--style="display: none"-->  </form> </div>

vue代碼

 uploadImg: async function(id) {   var vm = this   vm.imageLoading = true   var formData = new FormData($('#' + id)[0])   try {   const url = await vm.uploadImgReq(formData)// 自訂的圖片上傳函數   if (url != null && url.length > 0) {    var value = url    vm.addImgRange = vm.$refs.newEditor.quill.getSelection()    value = value.indexOf('http') != -1 ? value : 'http:' + value    vm.$refs.newEditor.quill.insertEmbed(vm.addImgRange != null?vm.addImgRange.index:0, 'image', value, Quill.sources.USER)   } else {    vm.$message.warning("圖片增加失敗")   }   document.getElementById(vm.uniqueId).value=''   } catch ({message: msg}) {   document.getElementById(vm.uniqueId).value=''   vm.$message.warning(msg)   }   vm.imageLoading = false  },

到這裡就大功告成啦。如果有什麼錯誤、問題或者更好的解決方案歡迎指正討論~
最後，在解決這個問題的時候，順便把ImageResize整合到了控制項中。具體實現比較簡單可以參考vue-quill-editor中的demo樣本

 import Quill from 'quill' import { ImageResize } from '../modules/ImageResize.js' Quill.register('modules/imageResize', ImageResize)

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。