問題描述

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、寒亭網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、寒亭網(wǎng)絡(luò)營(yíng)銷、寒亭企業(yè)策劃、寒亭品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供寒亭建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.chinadenli.net

  項(xiàng)目使用的vue2.0開發(fā)，項(xiàng)目中需要一個(gè)富文本編輯器，樓主經(jīng)過一番心理掙扎選擇了vue-quill-editor。具體如何引用作者在項(xiàng)目中已經(jīng)寫得很明白了，我在這里就不再贅述。
  vue-quill-editor插入圖片的方式是將圖片轉(zhuǎn)為base64再放入內(nèi)容中，這樣就會(huì)產(chǎn)生一個(gè)問題，如果圖片比較大的話，富文本的內(nèi)容就會(huì)很大，樓主是將內(nèi)容存在數(shù)據(jù)庫中的，這樣一來，一方面會(huì)占用大量的數(shù)據(jù)庫存儲(chǔ)空間，另一方面當(dāng)圖片太大的時(shí)候富文本的內(nèi)容，會(huì)超過數(shù)據(jù)庫的存儲(chǔ)上限，從而會(huì)產(chǎn)生內(nèi)容被截?cái)鄰亩@示不全的問題（即使是text類型，也有存儲(chǔ)上限65535）。
  那么問題來了，如何將圖片上傳到自己的服務(wù)器或第三方服務(wù)，然后將獲得的圖片url插入到文本中呢？我認(rèn)為大致有兩個(gè)方法，其一是將任務(wù)交給服務(wù)端，服務(wù)端截取base64圖片并轉(zhuǎn)化為文件，將其路徑或者url替換原來的圖片數(shù)據(jù)；其二是對(duì)控件本身下手，首先將圖片上傳，然后插入到富文本中。接下來樓主就開始了自己的踩坑之路。

解決方案

基礎(chǔ)簡(jiǎn)介

1.vue-quill-editor是基于quill(github地址)適用于Vue2的富文本編輯器，所以對(duì)于quill的原生屬性擴(kuò)展也是支持的。quill文檔地址

2.quill 中有許多擴(kuò)展和自定義方法功能。比如圖片的重定義大小、圖片上傳的點(diǎn)擊處理等。

圖片上傳

通過查看quill項(xiàng)目issue。發(fā)現(xiàn)其中是有對(duì)圖片上傳這方面問題進(jìn)行考慮和修改的。所以圖片上傳這個(gè)方案是可行的。接下來就是如何實(shí)現(xiàn)。

3.首先我們需要在項(xiàng)目中拿到quill的實(shí)例。這個(gè)在vue-quill-editor項(xiàng)目中有介紹如何獲取。基本方法就是通過ref獲取你的vue-quill-editor實(shí)例，再獲取quill實(shí)例，代碼如下。其中newEditor就是我的vue-quill-editor

 this.$refs.newEditor.quill

4.在拿到實(shí)例后我們需要考慮如何圖片上傳并將url插入文本中。通過查找發(fā)現(xiàn)可以注冊(cè)一個(gè)自定義的圖片處理函數(shù)，當(dāng)頂部的工具欄中的圖片按鈕被點(diǎn)擊的時(shí)候，就會(huì)觸發(fā)這個(gè)函數(shù)。然而在實(shí)際使用中你會(huì)發(fā)現(xiàn)這個(gè)函數(shù)并不像文檔中所說的接收（image, callback）兩個(gè)參數(shù)，image是你的圖片，你只需要在callback中將傳入處理后的url就可以。而是接收一個(gè)參數(shù)state，當(dāng)被點(diǎn)擊時(shí)就會(huì)觸發(fā)這個(gè)函數(shù)，并傳入state值----true。這里首先介紹一下，如何注冊(cè)這個(gè)處理函數(shù)-imgHandler。這里要注意，注冊(cè)函數(shù)要寫在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查閱，發(fā)現(xiàn)就只能在imgHandler中自己實(shí)現(xiàn)點(diǎn)擊上傳和插入的功能。這樣就在editor下面寫一個(gè)不顯示的input，并監(jiān)聽變化上傳圖片，獲取其實(shí)例，當(dāng)imgHandler被點(diǎn)擊時(shí)，模擬input按鈕被點(diǎn)擊。代碼變成如下示例。

 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() //加一個(gè)觸發(fā)事件
 }
 }
 vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)
 }

6.最后是input的點(diǎn)擊上傳和圖片url的插入。

HTML代碼

 <div
 v-loading="imageLoading"
 element-loading-text="請(qǐng)稍等，圖片上傳中">
 <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)// 自定義的圖片上傳函數(shù)
  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
 },

到這里就大功告成啦。如果有什么錯(cuò)誤、問題或者更好的解決方案歡迎指正討論~
最后，在解決這個(gè)問題的時(shí)候，順便把ImageResize集成到了控件中。具體實(shí)現(xiàn)比較簡(jiǎn)單可以參考vue-quill-editor中的demo示例

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁標(biāo)題：vue-quill-editor實(shí)現(xiàn)圖片上傳功能
文章出自：http://www.chinadenli.net/article32/gghcsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站收錄、關(guān)鍵詞優(yōu)化、小程序開發(fā)、網(wǎng)站策劃、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)