脚本宝典收集整理的这篇文章主要介绍了改造vue-quill-editor(二)：10秒搞定自定义上传图片到服务器，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

原生上传图片到服务器

上次给大家分享过下面的文章
结合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组件中绑定配置

<template>  <div>  <quill-editor     ref="myQuillEditor"     :options="editorOptions"  <!-- 这里必须绑定-->   @change="onEditorChange($event)"   @ready="onEditorReady($event)"   >   </quill-editor> </div> </template> <script>   import {quillEditor} from 'vue-quill-editor' // 调用编辑器   import {editorOptions} from '@/config/vue-quill.editor-config'    export default {     components: {quillEditor}     data() {       return {         //  富文本框参数设置， 这里也是必须绑定的，因为参数绑定是绑定组件里面的数据，        //  而不是直接绑定引入的editorOptionss         editorOptions: editorOptionss       }     }   } </script>

预留的事件接口

在配置文件中大家可根据自己的需求自行定义上传图片的各个阶段的事件

注意绑定好你的图片参数

如下图所示，res.info为上传图片成功后返回的图片地址，如果不确认返回的数据格式，可以使用console.LOG() 进行查看

附加内容

如何在配置文件中获取Vue实例
由于在handler中，this是指向编辑器，因此无法直接用this去获取vue实例，
如果想获取，需要进行如下操作

• 暴露实例

@H_406_74@

• 引入实例

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

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

结束！

简不简单？

感觉有用的朋友请点个赞

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的改造vue-quill-editor(二)：10秒搞定自定义上传图片到服务器全部内容，希望文章能够帮你解决改造vue-quill-editor(二)：10秒搞定自定义上传图片到服务器所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。