改造vue-quill-editor(二)：10秒搞定自定义上传图片到服务器

xushaojieaaa 发布于2019-08-21 18:37 / 2535人阅读

摘要：原生上传图片到服务器上次给大家分享过下面的文章结合上传图片到服务器基于上面的原理，我又替大家把整个配置封装好了，大家在使用的时候直接引入配置文件即可。

原生上传图片到服务器

上次给大家分享过下面的文章
结合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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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