vue-quill-editor实现图片上传功能

问题描述

  项目使用的vue2.0开发，项目中需要一个富文本编辑器，楼主经过一番心理挣扎选择了vue-quill-editor。具体如何引用作者在项目中已经写得很明白了，我在这里就不再赘述。
  vue-quill-editor插入图片的方式是将图片转为base64再放入内容中，这样就会产生一个问题，如果图片比较大的话，富文本的内容就会很大，楼主是将内容存在数据库中的，这样一来，一方面会占用大量的数据库存储空间，另一方面当图片太大的时候富文本的内容，会超过数据库的存储上限，从而会产生内容被截断从而显示不全的问题（即使是text类型，也有存储上限65535）。
  那么问题来了，如何将图片上传到自己的服务器或第三方服务，然后将获得的图片url插入到文本中呢？我认为大致有两个方法，其一是将任务交给服务端，服务端截取base64图片并转化为文件，将其路径或者url替换原来的图片数据；其二是对控件本身下手，首先将图片上传，然后插入到富文本中。接下来楼主就开始了自己的踩坑之路。

解决方案

基础简介

1.vue-quill-editor是基于quill(github地址)适用于Vue2的富文本编辑器，所以对于quill的原生属性扩展也是支持的。quill文档地址

2.quill 中有许多扩展和自定义方法功能。比如图片的重定义大小、图片上传的点击处理等。

图片上传

通过查看quill项目issue。发现其中是有对图片上传这方面问题进行考虑和修改的。所以图片上传这个方案是可行的。接下来就是如何实现。

3.首先我们需要在项目中拿到quill的实例。这个在vue-quill-editor项目中有介绍如何获取。基本方法就是通过ref获取你的vue-quill-editor实例，再获取quill实例，代码如下。其中newEditor就是我的vue-quill-editor

 this.$refs.newEditor.quill

4.在拿到实例后我们需要考虑如何图片上传并将url插入文本中。通过查找发现可以注册一个自定义的图片处理函数，当顶部的工具栏中的图片按钮被点击的时候，就会触发这个函数。然而在实际使用中你会发现这个函数并不像文档中所说的接收（image, callback）两个参数，image是你的图片，你只需要在callback中将传入处理后的url就可以。而是接收一个参数state，当被点击时就会触发这个函数，并传入state值----true。这里首先介绍一下，如何注册这个处理函数-imgHandler。这里要注意，注册函数要写在mounted生命周期钩子里。

mounted() {
var vm =this
 var imgHandler = async function(state) {
 if (state) {
 //button is clicked
 }
 }
 vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)
}

5.通过在stackflow查阅，发现就只能在imgHandler中自己实现点击上传和插入的功能。这样就在editor下面写一个不显示的input，并监听变化上传图片，获取其实例，当imgHandler被点击时，模拟input按钮被点击。代码变成如下示例。

 mounted() {
 var vm =this
 var imgHandler = async function(image) {
 vm.addImgRange = vm.$refs.newEditor.quill.getSelection()
 if (image) {
  var fileInput = document.getElementById(vm.uniqueId) //隐藏的file文本ID
  fileInput.click() //加一个触发事件
 }
 }
 vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)
 }

6.最后是input的点击上传和图片url的插入。

HTML代码

 <div
 v-loading="imageLoading"
 element-loading-text="请稍等，图片上传中">
 <quill-editor
 ref="newEditor"
 :options="newOption"
 style="height: 200px; margin-bottom: 54px"
 v-model="editorContent"
 @change="editorChange">
 </quill-editor>
 <form action="" method="post" enctype="multipart/form-data" id="uploadFormMulti">
 <input style="display: none" :id="uniqueId" type="file" name="avator" multiple accept="image/jpg,image/jpeg,image/png,image/gif" @change="uploadImg('uploadFormMulti')"><!--style="display: none"-->
 </form>
 </div>

vue代码

 uploadImg: async function(id) {
  var vm = this
  vm.imageLoading = true
  var formData = new FormData($('#' + id)[0])
  try {
  const url = await vm.uploadImgReq(formData)// 自定义的图片上传函数
  if (url != null && url.length > 0) {
  var value = url
  vm.addImgRange = vm.$refs.newEditor.quill.getSelection()
  value = value.indexOf('http') != -1 ? value : 'http:' + value
  vm.$refs.newEditor.quill.insertEmbed(vm.addImgRange != null?vm.addImgRange.index:0, 'image', value, Quill.sources.USER)
  } else {
  vm.$message.warning("图片增加失败")
  }
  document.getElementById(vm.uniqueId).value=''
  } catch ({message: msg}) {
  document.getElementById(vm.uniqueId).value=''
  vm.$message.warning(msg)
  }
  vm.imageLoading = false
 },

到这里就大功告成啦。如果有什么错误、问题或者更好的解决方案欢迎指正讨论~
最后，在解决这个问题的时候，顺便把ImageResize集成到了控件中。具体实现比较简单可以参考vue-quill-editor中的demo示例

 import Quill from 'quill'
 import { ImageResize } from '../modules/ImageResize.js'
 Quill.register('modules/imageResize', ImageResize)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue  # quill  # editor  # 图片上传  # 详解Vue基于vue-quill-editor富文本编辑器使用心得  # VueQuillEditor富文本上传图片(非base64)  # Vue富文本插件(quill-editor)的使用及说明  # 就会  # 自己的  # 自定义  # 中有  # 编辑器  # 服务端  # 有什么  # 上传  # 文档  # 来了  # 也有  # 就在  # 是有  # 一是  # 适用于  # 将其  # 之路  # 我认为  # 要注意 

相关文章： 如何选择高效便捷的WAP商城建站系统？  建站之星伪静态规则如何设置？  建站之星安装模板失败：服务器环境不兼容？  怀化网站制作公司,怀化新生儿上户网上办理流程？  如何挑选最适合建站的高性能VPS主机？  学校免费自助建站系统：智能生成+拖拽设计+多端适配  高性价比服务器租赁——企业级配置与24小时运维服务  网站海报制作教学视频教程,有什么免费的高清可商用图片网站，用于海报设计？  专业商城网站制作公司有哪些,pi商城官网是哪个？  打鱼网站制作软件,波克捕鱼官方号怎么注册？  网站制作的软件有哪些,制作微信公众号除了秀米还有哪些比较好用的平台？  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  网站制作模板下载什么软件,ppt模板免费下载网站？  网站微信制作软件,如何制作微信链接？  建站主机SSH密钥生成步骤及常见问题解答？  如何在云虚拟主机上快速搭建个人网站？  北京建设网站制作公司,北京古代建筑博物馆预约官网？  公司网站制作需要多少钱,找人做公司网站需要多少钱？  制作表格网站有哪些,线上表格怎么弄？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  如何在阿里云完成域名注册与建站？  电脑免费海报制作网站推荐,招聘海报哪个网站多？  视频网站app制作软件,有什么好的视频聊天网站或者软件？  岳西云建站教程与模板下载_一站式快速建站系统操作指南  网页设计网站制作软件,microsoft office哪个可以创建网页？  微网站制作教程,我微信里的网站怎么才能复制到浏览器里？  移民网站制作流程,怎么看加拿大移民官网？  建站之星在线客服如何快速接入解答？  php条件判断怎么写_ifelse和switchcase的使用区别【对比】  深圳网站制作案例,网页的相关名词有哪些？  ,有什么在线背英语单词效率比较高的网站？  英语简历制作免费网站推荐,如何将简历翻译成英文？  专业公司网站制作公司,用什么语言做企业网站比较好？  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  内部网站制作流程,如何建立公司内部网站？  建站之星安装步骤有哪些常见问题？  网站制作软件有哪些,制图软件有哪些？  大型企业网站制作流程,做网站需要注册公司吗？  制作网站的基本流程,设计网站的软件是什么？  建站主机选择指南：服务器配置与SEO优化实战技巧  如何在万网自助建站平台快速创建网站？  如何挑选高效建站主机与优质域名？  利用JavaScript实现拖拽改变元素大小  Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  佛山网站制作系统,佛山企业变更地址网上办理步骤？  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  一键制作网站软件下载安装,一键自动采集网页文档制作步骤？  如何在服务器上配置二级域名建站？  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  南平网站制作公司,2025年南平市事业单位报名时间？