脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

vue-quill-editor-upload

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

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

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

说明

由于本模块不兼容其他模块,很有局限性,现已经开发了新的插件,并且增加了复制粘贴拖拽上传等功能,也能兼容别人的模块,大家要使用的话使用新模块quill-image-extend-module,完美兼容调整大小resize-module

install

  • npm
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-editor

  • 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

必须在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>

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过