VueQuillEditor富文本上传图片(非base64)


Posted in Javascript onJune 03, 2020

前言

本篇文章将介绍vue-quill-editor上传图片的那些事,通常来说,我们数据库内都是保存图片路径的,所以上传完图片之后,要回传一个路径给前端,这才是完整的上传步骤。
第一步:上传图片,第二步:保存到服务器,并且生成路径保存到数据库,第三步:回传前端,后台图片路径,前端显示图片。

本文中使用了element-ui框架来帮助我完成前端展示工作。

上传图片

上传图片也有几种方式,比如直接使用file控件上传到指定地址,又或者是借助封装好的上传按钮上传图片,如果是base64传到后台,还需要转回图片原格式加以保存,如果是二进制图片流则直接传到服务器即可。
我使用的是element-ui框架里的el-upload组件进行上传,而且这个组件是隐藏的,不会显示出来

<el-upload
      class="avatar-uploader"
      :action="articleImgUrl"
      name="img"
      :headers="headerObj"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload">
      </el-upload>

上述参数解释:
(1)class 上传组件的样式,也可以用于查找该组件
(2)action 传值,必选参数,上传的地址
(3)name 上传文件字段名,后端在获取文件时需要起一个名字,这个名字就在这里定义
(4)headers 设置上传的请求头部
(5) show-file-list 是否显示已上传文件列表,这里不显示
(6) on-success 文件上传成功时的钩子,如果成功,则回传图片地址,显示图片将src传入地址
(7) on-error 文件上传失败时的钩子
(8)before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。

我首先需要监听富文本点击上传图片按钮的事件:

VueQuillEditor富文本上传图片(非base64)

VueQuillEditor富文本上传图片(非base64)

editorOption: {
    scrollingContainer: '#editorcontainer',
    placeholder: '',
    // or 'bubble'
    theme: 'snow',
    modules: {
     imageResize: {
      displayStyles: {
       backgroundColor: 'black',
       border: 'none',
       color: 'white'
      },
      modules: ['Resize', 'DisplaySize', 'Toolbar']
     },
     toolbar: {
      // 工具栏
      container: toolbarOptions.toolbarOptions,
      handlers: {
       'image': function (value) {
        if (value) {
         // upload点击上传事件
         document.querySelector('.avatar-uploader input').click()
        } else {
         this.quill.format('image', false)
        }
       }
      }
     }
    }
   },

上面代码当中toolbar里的handlers就是监听点击图片按钮事件,然后我们模拟点击el-upload组件,就会弹出选择文件的框,我们开始选择文件进行上传。

当后端处理好图片后,我们拿到回传的地址,在富文本光标处插入img标签

VueQuillEditor富文本上传图片(非base64)

VueQuillEditor富文本上传图片(非base64)

VueQuillEditor富文本上传图片(非base64)

// 上传成功
  uploadSuccess(res) {
   var dt = res.result
   let quill = this.$refs.myQuillEditor.quill
   // 如果上传成功
   if (dt.meta.status === this.GLB.IMAGE_ADD_SUCCESS && dt.url !== null) {
    // 获取光标所在位置
    let length = quill.getSelection().index
    // 插入图片 dt.url为服务器返回的图片地址
    quill.insertEmbed(length, 'image', this.glAPI + dt.url)
    // 调整光标到最后
    quill.setSelection(length + 1)
   } else {
    this.$message.error('图片插入失败')
   }
   // loading加载隐藏
   this.quillUpdateImg = false
  },

VueQuillEditor富文本上传图片(非base64)

如果小伙伴喜欢原生标签使用input标签file类型也是可以的,或者也可以借助JavaScript或者jQuery响应点击事件来传文件也是可以哒!

总结

上传图片其实是一个很简单的过程,但是却需要前后端来配合食用,味道才正宗。所以只学前端的小伙伴可以找个后端开发写个接口啥的帮你回传一个地址,或者干脆自己造个假的也行。

我一开始不是很清楚图片到底怎么传的,比如base64是什么,其实就是照片的一串字符串,这一串字符串就是照片,有的时候是可能存在把这一串base64字符串保存到数据库的。但是大多数情况我们还是在数据库中保存路径,所以很多想保存图片路径的小伙伴们,可以参考上述代码,下一篇我将结合Java来展示图片保存的代码是怎样实现的,又是怎样回传图片地址的,敬请期待吧!!

到此这篇关于VueQuillEditor富文本上传图片(非base64)的文章就介绍到这了,更多相关VueQuillEditor富文本上传图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
javascript实现雪花飘落效果
Aug 19 Javascript
微信小程序文章列表功能完整实例
Jun 03 #Javascript
Angular8 简单表单验证的实现示例
Jun 03 #Javascript
JS实现前端动态分页码代码实例
Jun 02 #Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 #Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 #jQuery
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 #Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 #Javascript
You might like
计数器详细设计
2006/10/09 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
php 归并排序 数组交集
2011/05/10 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
基于python 凸包问题的解决
2020/04/16 Python
keras 权重保存和权重载入方式
2020/05/21 Python
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
铭立家具面试题
2012/12/06 面试题
财务助理岗位职责
2013/11/10 职场文书
小学美术教学反思
2014/02/01 职场文书
生物科学专业自荐书
2014/06/20 职场文书