成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

xushaojieaaa / 2551人閱讀

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

原生上傳圖片到服務(wù)器

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

可限制圖片上傳的格式

可限制圖片的大小

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

具體使用如下

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

新建一個(gè)文件名為 vue-quill-editor-config.js（文件名可自定義），點(diǎn)擊上面的鏈接復(fù)制代碼到本文件

綁定配置

引入配置參數(shù)

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

在vue組件中綁定配置
預(yù)留的事件接口

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

注意綁定好你的圖片參數(shù)

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

附加內(nèi)容

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

暴露實(shí)例

引入實(shí)例

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

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

結(jié)束！ 簡不簡單？ 感覺有用的朋友請點(diǎn)個(gè)贊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90652.html

相關(guān)文章

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

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

    oneasp 評論0 收藏0

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

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

    miracledan 評論0 收藏0

  • # quill-image-extend-module ：實(shí)現(xiàn)vue-quill-editor圖片上

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

    big_cat 評論0 收藏0

  • vue-quill-editor富文本編輯器

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

    qujian 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<