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 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
jQuery 加上最后自己的验证
Nov 04 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
使用js画图之画切线
Jan 12 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
js实现点击生成随机div
Jan 16 Javascript
react 项目中引入图片的几种方式
Jun 02 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生成图片的缩略图的方法
2015/08/18 PHP
PHP框架性能测试报告
2016/05/08 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
一个实用的php验证码类
2017/07/06 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
babel基本使用详解
2017/02/17 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
使用vue制作滑动标签
2019/09/21 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python自动裁剪图像代码分享
2017/11/25 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
python3转换code128条形码的方法
2019/04/17 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
什么是方法的重载
2013/06/24 面试题
玩具公司的创业计划书
2013/12/31 职场文书
入党自我评价优缺点
2014/01/25 职场文书
甜点店创业计划书
2014/01/27 职场文书
狼和鹿教学反思
2014/02/05 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
企业总经理任命书
2014/06/05 职场文书
网聊搭讪开场白
2015/05/28 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
redis cluster支持pipeline的实现思路
2021/06/23 Redis
深入理解pytorch库的dockerfile
2022/06/10 Python
nginx配置指令之server_name的具体使用
2022/08/14 Servers