問題描述

創新互聯公司專注為客戶提供全方位的互聯網綜合服務，包含不限于成都做網站、網站設計、外貿營銷網站建設、寒亭網絡推廣、微信小程序定制開發、寒亭網絡營銷、寒亭企業策劃、寒亭品牌公關、搜索引擎seo、人物專訪、企業宣傳片、企業代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創新互聯公司為所有大學生創業者提供寒亭建站搭建服務，24小時服務熱線：18982081108，官方網址：vcdvsql.cn

  項目使用的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"
 
 v-model="editorContent"
 @change="editorChange">
 </quill-editor>
 <form action="" method="post" enctype="multipart/form-data" id="uploadFormMulti">
 <input  :id="uniqueId" type="file" name="avator" multiple accept="image/jpg,image/jpeg,image/png,image/gif" @change="uploadImg('uploadFormMulti')"><!---->
 </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)

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。

網頁標題：vue-quill-editor實現圖片上傳功能
文章出自：http://vcdvsql.cn/article32/gghcsc.html

成都網站建設公司_創新互聯，為您提供做網站、網站收錄、關鍵詞優化、小程序開發、網站策劃、

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯