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

來源：懂視網責編：小采時間：2020-11-27 22:33:19

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

vue-quill-editor實現圖片上傳功能:問題描述項目使用的vue2.0開發，項目中需要一個富文本編輯器，樓主經過一番心理掙扎選擇了vue-quill-editor。具體如何引用作者在項目中已經寫得很明白了，我在這里就不再贅述。 vue-quill-editor插入圖片的

推薦度：

點擊下載本文 文檔為doc格式

導讀vue-quill-editor實現圖片上傳功能:問題描述項目使用的vue2.0開發，項目中需要一個富文本編輯器，樓主經過一番心理掙扎選擇了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)

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽：圖片上傳功能

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦