解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

vue-quill-editor是个较为轻量级富文本框，相较于ueditor，开发更编辑，更加直观，如果大家伙在需求允许的情况下，还是会比较建议使用vue-quill-editor。

vue-quill-editor的使用方法在这边就不多说了，大家网上查下，一抓一大把

但是在使用vue-quill-editor有一个致命的问题，vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片比较大的话，富文本的内容就会很大，即使图片不大，只要图片较为多，篇幅较长，富文本的内容也是异常的大的，这就会给大家带来一些烦恼，我们可能更希望在提交富文本的内容的时候图片只是以图片地址提交，那这样一来我们要怎么去处理呢，接下来大家可以来理一理

还是老思路，既然我们可以希望不是直接将图片转成base64，那么我们可以采用选择完图片，即将图片上传服务器，服务器返回相应的图片链接，前端将图片链接插入到富文本的指定光标上即可，这样一来就可以实现我们的想要的效果了

首先，新建富文本组件QuillEditor.vue，利用iview的上传组件来上传选择完的图片（当然，其他的上传组件也是ok的）

<Upload
    id="iviewUp"
     ref="upload"
     :show-upload-list="false"
     :on-success="handleSingleSuccess"
     :format="['jpg','jpeg','png']"
     :max-size="2048"
     :headers="header"
     :on-format-error="handleFormatError"
     :before-upload="handleBeforeUpload()"
     type="drag"
     :action="serverUrl"
     style="display: none;width:0">
     <div style="width: 0">
       <Icon type="ios-camera" size="50"></Icon>
     </div>
   </Upload>
   <!--<Row>-->
    <quill-editor
     v-model="detailContent"
     ref="myQuillEditor"
     :options="editorOption"
     @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
     @change="onEditorChange($event)">
    </quill-editor>
   <!--</Row>-->

看到上面的代码有的的就会有疑问了，那上传好的图片要怎么插到富文本的指定光标里面呢，别慌，面包会有的，往下看，

handleSingleSuccess (res, file) {
   // res为图片服务器返回的数据
   // 获取富文本组件实例
   let vm = this
   let quill = this.$refs.myQuillEditor.quill
   console.log('res---', vm.$refs.myQuillEditor.quill.getSelection())
   // 如果上传成功
   if (res.res_code === '1') {
     // 获取光标所在位置
     let length = quill.getSelection().index;
     // 插入图片 res.info为服务器返回的图片地址
     quill.insertEmbed(length, 'image', res.result.url)
     // 调整光标到最后
     quill.setSelection(length + 1)
   } else {
     vm.$Message.error('图片插入失败')
   }
   // loading动画消失
   this.quillUpdateImg = false
  }

通过 this.$refs.myQuillEditor.quill.getSelection().index获取光标所在位置，将图片地址放在该位置即可

这样一来万事俱备，只欠东风了，这个时候大家会发现，那iview这个上传组件在页面上呢，我怎么实现点击富文本上的上传图片的按钮调用iview的上传组件的方法呢，

这个时候我们就要用到富文本中的配置属性editorOption，对editorOption进行图片上传的点击事件进行相应的配置即可，详情看下面代码

 editorOption: { // 富文本框配置
     placeholder: '',
     theme: 'snow', // or 'bubble'
     modules: {
       toolbar: {
         container: toolbarOptions, // 工具栏
         handlers: {
           'image': function (value) {

if (value) {
               document.querySelector('#iviewUp input').click()
             } else {
               this.quill.format('image', false);
             }
           }
         }
       }
     }
   }

 document.querySelector('#iviewUp input') 这个就是相应的dom节点的点击事件，将其绑在富文本的图片按钮点击事件上好了，基本上大功告成。还是算比较简单的，希望可以供大家参考

总结

以上所述是小编给大家介绍的解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解Vue基于vue-quill-editor富文本编辑器使用心得

    vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! 那么我们直击正题,在vue中使用quill呢,我们需要npm进行安装,安装命令如下: npm install vue-quill-editor 再安装依赖项 npm install quill 使用: 在main.js中进行引入 import Vue from 'vue' import VueQui

  • vue-quill-editor+plupload富文本编辑器实例详解

    1,先给vue项目中下载vue-quill-editor依赖npm install vue-quill-editor --save 2,下载plupload依赖npm install plupload --save 3,在组件中分别引入对应的js import { quillEditor }from 'vue-quill-editor' import '@/assets/js/crypto1/crypto/crypto.js' import '@/assets/js/crypto1/hmac/h

  • vue-quill-editor富文本编辑器简单使用方法

    文章刚开始先来介绍一下vue-quill-editor富文本编辑器的简单使用,具体操作步骤如下: 安装: npm install vue-quill-editor --save main.js: import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css'

  • Vue-Quill-Editor富文本编辑器的使用教程

    Vue-Quill-Editor富文本编辑器的使用教程

    本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法,供大家参考,具体内容如下 先看效果图: 1.下载Vue-Quill-Editor npm install vue-quill-editor --save 2.下载quill(Vue-Quill-Editor需要依赖) npm install quill --save 3.代码 <template> <div class="edit_container"> <quill-editor

  • 详解vue中使用vue-quill-editor富文本小结（图片上传）

    vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时候,我们往往要插入一些图片,vue-quill-editor默认的处理方式是直接将图片转成base64编码,这样的结果是整个富文本的html片段十分冗余,通常来讲,每个服务器端接收的post的数据大小都是有限制的,这样的话有可能导致提交失败,或者是用户体验很差,数据要传递很久才全部传送到服务器. 1.下载Vue-Quill-Editor npm install vue-quill-editor

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

    问题描述   项目使用的vue2.0开发,项目中需要一个富文本编辑器,楼主经过一番心理挣扎选择了vue-quill-editor.具体如何引用作者在项目中已经写得很明白了,我在这里就不再赘述.   vue-quill-editor插入图片的方式是将图片转为base64再放入内容中,这样就会产生一个问题,如果图片比较大的话,富文本的内容就会很大,楼主是将内容存在数据库中的,这样一来,一方面会占用大量的数据库存储空间,另一方面当图片太大的时候富文本的内容,会超过数据库的存储上限,从而会产生内容被截断

  • 解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

    vue-quill-editor是个较为轻量级富文本框,相较于ueditor,开发更编辑,更加直观,如果大家伙在需求允许的情况下,还是会比较建议使用vue-quill-editor. vue-quill-editor的使用方法在这边就不多说了,大家网上查下,一抓一大把 但是在使用vue-quill-editor有一个致命的问题,vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大,即使图片不大,只要图片较为多,篇幅较长,富

  • VUE+element-ui文件上传的示例代码

    VUE+element-ui文件上传的示例代码

    目录 图片上传(ImageCropper) 文件上传(el-upload) 注意 图片上传(ImageCropper) 此前端代码自己封装了文件上传,只需要配置后端接口需求URL以及对应的图片上传成功后的处理函数,后端返回OSS生成的图片访问地址,然后cropsuccess函数将上传成功的图像进行显示. <template> <div class="app-container"> <!-- 讲师头像 --> <el-form-item labe

  • vue 文件切片上传的项目实现

    目录 流程简说 获取文件的 MD5 唯一标识码 文件切片 获取文件名 name 分片文件大小 chunkSize 文件切片 chunkList 列表 切片总数 chunks 切片大小 size 合并 在实际开发项目过程中有时候需要上传比较大的文件,然后呢,上传的时候相对来说就会慢一些,so,后台可能会要求前端进行文件切片上传,很简单哈,就是把比如说1个G的文件流切割成若干个小的文件流,然后分别请求接口传递这个小的文件流. 流程简说 实现文件切片导入,首先我们使用 elementUI 也好,原生的

  • vue项目打包上传github并制作预览链接（pages）

    当Vue项目完成后,在根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源. 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下包括项目打包后的css.js.img.fonts(字体图标). 项目资源无法加载 点击index.html,浏览器显示该页面是空白的.打开控制台看到index.html文件中没有加载任何css.js文件. 解决方法: 打开项目根目录config下的index.

  • vue.js异步上传文件前后端实现代码

    本文实例为大家分享了vue.js异步上传文件的具体代码,供大家参考,具体内容如下 上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8&qu

  • TP3.2批量上传文件或图片 同名冲突问题的解决方法

    本文实例为大家分享了TP3.2批量上传文件或图片的具体代码,并解决了同名冲突问题,供大家参考,具体内容如下 1.html <form action="{:U('Upload/index')}" enctype="multipart/form-data" method="post" > <p><input type="file" id="file3" name="ID[

  • 解决pycharm 远程调试 上传 helpers 卡住的问题

    公司开发环境跑在linux上,用了一周都没问题,突然今天无法使用了,具体表现就是一打开pycharm,同步远程解释器就卡在上传helper文件之处,折腾一上午加一中午,用这个方法解决了,写下来避免其他人入坑! 解决:pycharm安装文件夹下 例如C:\Program Files\JetBrains\PyCharm 2017.2.3这里面找到并且 删掉skeletons文件夹,重新启动再配置远程环境就好了 以上这篇解决pycharm 远程调试 上传 helpers 卡住的问题就是小编分享给大家的

  • vue中实现上传文件给后台实例详解

    FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件. (ps:说白了就是不使用form表单实现form表单提交数据或文件,如果还是不懂,请自行百度) 实现过程 1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式) 2.修改input框的默认样式 3.通过选择文件拿到数据 4.请求接口 以上就是本次关于vue中实现上传文件给后

  • vue实现文件上传读取及下载功能

    本文实例为大家分享了vue实现文件上传读取及下载的具体代码,供大家参考,具体内容如下 文件的上传利用input标签的type="file"属性,读取用FileReader对象,下载通过创建a标签实现 <template> <div class="filediv"> <el-button @click="downloadFile">下载</el-button> <div id="fil

  • node+vue实现文件上传功能

    本文实例为大家分享了node+vue实现文件上传的具体代码,供大家参考,具体内容如下 *后端* const express = require('express'); const Router = express.Router(); const multer = require('multer'); const fs = require('fs'); const pathLib = require('path'); const videoModel = require('../../models

随机推荐