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 相关文章推荐
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
JavaScript中操作字符串小结
May 04 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
使用Python对Access读写操作
2017/03/30 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
单位办理社保介绍信
2014/01/10 职场文书
公司前台辞职报告
2014/01/19 职场文书
自我鉴定总结
2014/03/24 职场文书
大学社团计划书
2014/05/01 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
Java中的继承、多态以及封装
2022/04/11 Java/Android