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 相关文章推荐
javascript工具库代码
Mar 29 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
angular+webpack2实战例子
May 23 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
详解React之key的使用和实践
Sep 29 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 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
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
PHP 验证码的实现代码
2011/07/17 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php长字符串定义方法
2012/07/12 PHP
10 个经典PHP函数
2013/10/17 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
浅谈对yield的初步理解
2017/05/29 Python
python实现二叉查找树实例代码
2018/02/08 Python
Python常见工厂函数用法示例
2018/03/21 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
python根据时间获取周数代码实例
2019/09/30 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Python中Selenium模块的使用详解
2020/10/09 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
护理自荐信
2013/10/22 职场文书
五分钟演讲稿
2014/04/30 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书