vue-quill-editor-upload : 实现vue-quill-editor上传图片到服务器

时间 2019-11-10

标签 vue quill editor upload 实现上传图片服务器繁體版

原文原文链接

vue-quill-editor-upload

git： https://github.com/NextBoy/vu...vue

A plug-in for uploading images to your server when you use vue-quill-editor.git

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

说明

因为本模块不兼容其余模块，颇有局限性，现已经开发了新的插件，而且增长了复制粘贴拖拽上传等功能，也能兼容别人的模块，你们要使用的话使用新模块quill-image-extend-module，完美兼容调整大小resize-modulenpm

install

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

基本使用

<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(
        {
          // 图片上传的设置
          uploadConfig: {
            action: '',  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              return respnse.info
            },
            name: 'img'  // 图片上传参数名
          }
        }
      )
      console.log(this.editorOption)
    }
  }
</script>

use

You have to install vue-quill-editor first.服务器

请确保您已安装了 vue-quill-editorsession

import

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

quillRedefine是一个函数
quillRedefine 可接收的全部参数(all params)编辑器

{
          // 图片上传的设置
          uploadConfig: {
            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',  // 可选参数 可上传的图片格式
            // start: function (){}
            start: () => { },  // 可选参数 接收一个函数 开始上传数据时会触发
            end: () => { },  // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
            success: () => {},  // 可选参数 接收一个函数 上传数据成功时会触发
            error: () => { }  // 可选参数 接收一个函数 上传数据中断时会触发
          },
          // 如下全部设置都和vue-quill-editor自己所对应
          placeholder: '',  // 可选参数 富文本框内的提示语
          theme: '',  // 可选参数 富文本编辑器的风格
          toolOptions: [],  // 可选参数  选择工具栏的须要哪些功能  默认是所有
          handlers: {}  // 可选参数 重定义的事件，好比link等事件
}

demo

first

you must to do: :options="editorOption" to bound Parameters函数

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

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

second

return editorOption post

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

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

three

init in created

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

created () {
      this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uploadConfig: {
            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回你的图片地址
 }

example

完整用例

<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(
        {
          // 图片上传的设置
          uploadConfig: {
            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',  // 可选参数 可上传的图片格式
            // start: function (){}
            start: () => {
            },  // 可选参数 接收一个函数 开始上传数据时会触发
            end: () => {
            },  // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
            success: () => {
            },  // 可选参数 接收一个函数 上传数据成功时会触发
            error: () => {
            }  // 可选参数 接收一个函数 上传数据中断时会触发
          },
          // 如下全部设置都和vue-quill-editor自己所对应
          placeholder: '',  // 可选参数 富文本框内的提示语
          theme: '',  // 可选参数 富文本编辑器的风格
          toolOptions: [],  // 可选参数  选择工具栏的须要哪些功能  默认是所有
          handlers: {}  // 可选参数 重定义的事件，好比link等事件
        }
      )
      console.log(this.editorOption)
    }
  }
</script>