富文本编辑器vue-quill-editor的辅助插件，用于上传图片到你的服务器

前言：vue-quill-editor是个较为轻量级富文本框，相较于ueditor，开发更编辑，更加直观，如果大家伙在需求允许的情况下，还是会比较建议使用vue-quill-editor
但是在使用vue-quill-editor有一个致命的问题，vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大，
即使图片不大，只要图片较为多，篇幅较长，富文本的内容也是异常的大的，这就会给大家带来一些烦恼，我们可能更希望在提交富文本的内容的时候图片只是以图片地址提交，
那这样一来我们要怎么去处理呢，接下来大家可以来理一理  

vue-quill-editor-upload

富文本编辑器vue-quill-editor的辅助插件，用于上传图片到你的服务器

首先将引入组件（请确保您已安装了 vue-quill-editor）

npm install vue-quill-editor-upload --save 

接下来在项目的页面中使用

import {quillRedefine} from 'vue-quill-editor-upload'

你必须绑定option   :options="editorOption"


<template>
  <!-- bidirectional data binding（双向数据绑定） -->
  <quill-editor v-model="content"
                :options="editorOption">
  </quill-editor>
</template>

必须在return 中书写editorOPtion 并且设置默认为空对象

 data () {
      return {
        content: '',
        editorOption: {}  // 必须初始化为对象 init  to Object
      }
    }

在created生命周期中生成实际数据

created () {
      this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uplpadConfig: {
            action:  '',  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              return respnse.info  // 这里切记要return回你的图片地址
            }
          }
        }
      )
     // console.log(this.editorOption)
    }

注意事项 （matters need attention）

由于不同的用户的服务器返回的数据格式不尽相同

因此 在uploadConfig中，你必须如下操作

 // 你必须把返回的数据中所包含的图片地址 return 回去
 res: (respnse) => {
    return respnse.info  // 这里切记要return回你的图片地址
 }

比如你的服务器返回的成功数据为

{
code: 200,
starus: true,
result: {
    img: 'http://placehold.it/100x100' // 服务器返回的数据中的图片的地址
 }
}

那么你应该在参数中写为：

 // 你必须把返回的数据中所包含的图片地址 return 回去
 res: (respnse) => {
    return respnse.result.img  // 这里切记要return回你的图片地址
 }

接下来放一个完整用例

<template>
  <!-- bidirectional data binding（双向数据绑定） -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption">
  </quill-editor>
</template>

<script>
  import {quillRedefine} from 'vue-quill-editor-upload'
  import {quillEditor} from 'vue-quill-editor'
  export default {
    components: {quillEditor, quillRedefine},
    data () {
      return {
        content: '',
        editorOption: {}  // 必须初始化为对象 init  to Object
      }
    },
    created () {
      this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uplpadConfig: {
            action: '',  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              return respnse.info
            },
            methods: 'POST',  // 可选参数 图片上传方式  默认为post
            token: sessionStorage.token,  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
            name: 'img',  // 可选参数 文件的参数名 默认为img
            size: 500,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kb
            accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可选参数 可上传的图片格式
            // input点击事件  formData是提交的表单实体
            change: (formData) => { 
            },
            // 设置请求头 xhr: 异步请求， formData: 表单对象
            header: (xhr, formData) => {
                // xhr.setRequestHeader('myHeader','myValue');
                // formData.append('token', '1234')
            },
            // start: function (){}
            start: () => {
            },  // 可选参数 接收一个函数 开始上传数据时会触发
            end: () => {
            },  // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
            success: () => {
            },  // 可选参数 接收一个函数 上传数据成功时会触发
            error: () => {
            }  // 可选参数 接收一个函数 上传数据中断时会触发
          },
          // 以下所有设置都和vue-quill-editor本身所对应
          placeholder: '',  // 可选参数 富文本框内的提示语
          theme: '',  // 可选参数 富文本编辑器的风格
          toolOptions: [],  // 可选参数  选择工具栏的需要哪些功能  默认是全部
          handlers: {}  // 可选参数 重定义的事件，比如link等事件
        }
      )
      console.log(this.editorOption)
    }
  }
</script>

quillRedefine 可接收的所有参数(all params)

{
          // 图片上传的设置
          uplpadConfig: {
            action: '',  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              return respnse.info
            },
            methods: 'POST',  // 可选参数 图片上传方式  默认为post
            token: sessionStorage.token,  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
            name: 'img',  // 可选参数 文件的参数名 默认为img
            size: 500,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kb
            accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可选参数 可上传的图片格式
            // input点击事件  formData是提交的表单实体
            change: (formData) => { 
            },
            // 设置请求头 xhr: 异步请求， formData: 表单对象
            header: (xhr, formData) => {
                // xhr.setRequestHeader('myHeader','myValue');
                // formData.append('token', '1234')
            },
            start: () => {
            },  // 可选参数 接收一个函数 开始上传数据时会触发
            end: () => {
            },  // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
            success: () => {
            },  // 可选参数 接收一个函数 上传数据成功时会触发
            error: () => {
            }  // 可选参数 接收一个函数 上传数据中断时会触发
          },
          // 以下所有设置都和vue-quill-editor本身所对应
          placeholder: '',  // 可选参数 富文本框内的提示语
          theme: '',  // 可选参数 富文本编辑器的风格
          toolOptions: [],  // 可选参数  选择工具栏的需要哪些功能  默认是全部
          handlers: {}  // 可选参数 重定义的事件，比如link等事件
}

本人只用了 action、res、name

created () {
      this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uplpadConfig: {
            action:  '',  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              return respnse.info  // 这里切记要return回你的图片地址
            },
            name:'file'  //图片上传的参数名，也即是后台接口接受的参数名
          }
        }
      )
     // console.log(this.editorOption)
    }        

  有问题可加微信联系我一起学习探讨 ： 18237185359