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 相关文章推荐
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
js 实现验证码输入框示例详解
Sep 23 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
YB217、YB235、YB400浅听
2021/03/02 无线电
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
Python中实现输入一个整数的案例
2020/05/03 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
linux面试题参考答案(5)
2014/09/01 面试题
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
最新奶茶店创业计划书
2014/01/25 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
五好党支部事迹材料
2014/02/06 职场文书
高中军训感言400字
2014/02/24 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
商业门面租房协议书
2014/11/25 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
给领导的感谢信范文
2015/01/23 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript