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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
微信小程序文章列表功能完整实例
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
PHP系统流量分析的程序
2006/10/09 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
PHP数据过滤的方法
2013/10/30 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
纯js实现画一棵树的示例
2017/09/05 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python 图像的离散傅立叶变换实例
2020/01/02 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
消防应急演练方案
2014/02/12 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
趣味运动会简讯
2015/07/20 职场文书