改造vue-quill-editor(二)：10秒搞定自定義上傳圖片到服務器

xushaojieaaa 發布于2019-08-21 18:37 / 2544人閱讀

摘要：原生上傳圖片到服務器上次給大家分享過下面的文章結合上傳圖片到服務器基于上面的原理，我又替大家把整個配置封裝好了，大家在使用的時候直接引入配置文件即可。

原生上傳圖片到服務器

上次給大家分享過下面的文章
結合element-ui上傳圖片到服務器
基于上面的原理，我又替大家把整個配置封裝好了，大家在使用的時候直接引入配置文件即可。無需引入
element-ui，并且增加了部分功能：

可限制圖片上傳的格式

可限制圖片的大小

可重寫圖片上傳成功失敗觸發的事件

具體使用如下

引入自定義配置文件 vue-quill-editor-config.js

新建一個文件名為 vue-quill-editor-config.js（文件名可自定義），點擊上面的鏈接復制代碼到本文件

綁定配置

引入配置參數

import {editorOptions} from "@/config/vue-quill.editor-config"
// "@/config/vue-quill.editor-config" 為你存放自定義配置的文件路徑

在vue組件中綁定配置

預留的事件接口

在配置文件中大家可根據自己的需求自行定義上傳圖片的各個階段的事件

注意綁定好你的圖片參數

如下圖所示，res.info為上傳圖片成功后返回的圖片地址，如果不確認返回的數據格式，可以使用console.log() 進行查看

附加內容

如何在配置文件中獲取Vue實例
由于在handler中，this是指向編輯器，因此無法直接用this去獲取Vue實例，
如果想獲取，需要進行如下操作

暴露實例

引入實例

在vue-quill-editor-config.js配置中引入

在vue-quill-editor-config.js配置文件中使用

結束！ 簡不簡單？ 感覺有用的朋友請點個贊

GPU云服務器云服務器自定義圖片自定義圖片伸縮上傳圖片到cdn 上傳圖片到oss

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90652.html

vue-quill-editor自定義圖片上傳

摘要：我們通常都會使用富文本編輯器在后臺編輯內容，開發當然也少不了，我們通過官網的鏈接可以找到一些資源，或者去上查找一些開源的編輯器。我們通常都會使用富文本編輯器在后臺編輯內容，開發vue當然也少不了，我們通過vue官網的鏈接可以找到一些資源，或者去github上查找一些開源的編輯器。我使用的是vue-quill-editor，它的界面很簡潔，功能也滿足平時的編輯需要，不過于臃腫，但是它默...

oneasp 2019-08-20 17:26 評論0 收藏0
vue-quill-editor自定義圖片上傳

摘要：我們通常都會使用富文本編輯器在后臺編輯內容，開發當然也少不了，我們通過官網的鏈接可以找到一些資源，或者去上查找一些開源的編輯器。我們通常都會使用富文本編輯器在后臺編輯內容，開發vue當然也少不了，我們通過vue官網的鏈接可以找到一些資源，或者去github上查找一些開源的編輯器。我使用的是vue-quill-editor，它的界面很簡潔，功能也滿足平時的編輯需要，不過于臃腫，但是它默...

miracledan 2019-08-01 17:01 評論0 收藏0
# quill-image-extend-module ：實現vue-quill-editor圖片上

摘要：的增強模塊，功能提供圖片上傳到服務器的功能復制插入拖拽插入顯示上傳進度顯示上傳成功或者失敗支持與其他模塊一起使用例如調整圖片大小富文本框參數設置的所有可配置項可選參數是否顯示上傳進 quill-image-extend-module vue-quill-editor的增強模塊，功能：提供圖片上傳到服務器的功能復制插入拖拽插入顯示上傳進度顯示上傳成功或者失敗支持與其他模塊...

big_cat 2019-08-22 14:01 評論0 收藏0
vue-quill-editor富文本編輯器

摘要：富文本編輯器自定義組件加粗斜體下劃線刪除線引用代碼標題標題有序列表無序列表下標上標減少縮進增加縮進輸入方向字體大小段落格式字體顏色背景色字體對齊 vue-quill-editor 富文本編輯器自定義組件 ...

qujian 2019-08-22 13:57 評論0 收藏0