改造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实例，
若是想获取，须要进行以下操做

• 暴露实例

• 引入实例

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

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

结束！

简不简单？

感受有用的朋友请点个赞