Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本
发布日期:2021-10-13 12:43:49 浏览次数:1 分类:技术文章

本文共 1623 字,大约阅读时间需要 5 分钟。

该案例的情况

  • vue版本:vue cli3
  • 插件:vue-quill-editor
  • vue-quill-editor的增强模块:quill-image-extend-module

quill-image-extend-module功能:

  • 提供图片上传到服务器的功能
  • 复制插入
  • 显示上传进度
  • 显示上传成功或者失败

文章目录

一、选择这种方式的来龙去脉(读者可自行跳过)

本意呢,是打算将整个富文本的数据都上传到阿里云服务器上,但是把 Quill 数据封装进 fromData 中上传时,总是报错,报错信息是 Required request part 'file' is not present,如下

在这里插入图片描述
这个问题应该是前端传参和后台接收参数不一致的问题,和我的后台协商之后,发现并没有什么不妥之处,因为通过 el-upload 上传图片也是通过 formData 数据,是可以成功上传的。研究考虑一番之后,决定放弃此方式,改用存储数据库来实现,将富文本中插入的图片上传服务器、富文本的 html 字符串存储数据库。之所以将图片上传服务器,还有另一个原因,就是如果直接将富文本的 html 字符串存储数据库的话,富文本中插入的图片会以 base64 格式存储,占空间太大;而将图片上传服务器,把返回的图片地址以<img src="http://……" /> 存入富文本的 html 字符串中,可以大大缩小空间。下面上两张图对比一下

base64 格式:(截图没有截下全部,大概31kb)

在这里插入图片描述
图片地址格式:
在这里插入图片描述

二、实现

好了,来龙去脉记录完毕,下面开始说说如何实现

2.1 安装插件
npm install vue-quill-editor --save-devnpm install quill-image-extend-module --save-dev

注:在下面的使用过程中,如果出现 modules 里面缺少相关依赖,直接在项目中执行 npm install,就可以

2.2 引入
import {
quillEditor, Quill } from 'vue-quill-editor'import {
container, ImageExtend, QuillWatch } from 'quill-image-extend-module'Quill.register('modules/ImageExtend', ImageExtend)
2.3 使用

由于是第一次做这个功能,百度了很多,测试了两种方法。下面对这两种方法进行分析

2.3.1 方法一(推荐)
  • 实现思路:使用 quill-editor,通过改写 ImageExtend,进行图片上传、 img 标签改写(将图片地址插入 img 标签)
  • 效果:可以实现图片上传服务器、图片地址以 src 方式插入 img 标签并回显在 quill 编辑器内容中

参考自:

2.3.2 方法一延申:不改写方法
  • 实现思路:使用 quill-editor,不改写方法
  • 效果:可以实现图片上传,但是返回图片地址为 base64 格式

在这里插入图片描述

参考自:

2.3.3 方法三(不推荐)
  • 实现思路:使用 quill-editor 和 input,重写 ImageExtend,并通过 input 的 change 事件进行上传
  • 效果:可以实现图片上传,但是图片地址插入 quill 内较麻烦(我没有尝试去做这个,因为上面方法已经可以满足我的需求,而且更方面管理)

在这里插入图片描述

好了,到此为止,两种方式测试完毕,读者可根据自己的需求写适合自己的组件

转载地址:https://blog.csdn.net/qq_41956139/article/details/104917823 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Vue Element UI 之使用 Notification 组件--报错 this.$notify is not a function
下一篇:Vue cli3 安装bootstrap报错

发表评论

最新留言

感谢大佬
[***.8.128.20]2024年03月01日 10时58分01秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

java spring上传文件_Java Spring文件上传,Java文件上传,Java通用文件上传 2019-04-21
linux 模拟键盘输入到进程,Linux 下模拟键盘输入 2019-04-21
linux服务器上已安装R 用户下载R包,R语言安装R package的2种方法 2019-04-21
linux 7 磁盘空间太小,Linux下磁盘保留空间的调整,解决df看到的空间和实际磁盘大小不一致的问题... 2019-04-21
linux下mysql 备份方法,Linux下mysql数据库备份方法小结 2019-04-21
bootstrap 页面垂直居中_iframe中如何让layer提示框显示在垂直居中的位置 2019-04-21
肺部ct重建_胸片检查容易漏诊肺癌,去年正常今年晚期常发生,体检一定要做CT... 2019-04-21
3dmax如何拆分模型_3D建模大佬如何制作出惊艳四方的游戏建模,看完这篇文章我知道了... 2019-04-21
x86so文件装换成arm64位_64位系统正式发布说明及介绍!! 2019-04-21
for循环中取出最大最小 累加_LeetCode之长度最小的子数组 2019-04-21
如何打开老公人脸识别_【话题】南宁已有小区启用人脸识别门禁,有人点赞有人忧... 2019-04-21
makex机器人程序_机器人教育为相城青少年叩开科学世界大门 2019-04-21
一寸照纯红色底图片_Ella陈嘉桦也是“时髦精”,穿玫红色西装配拼色半身裙,高级洋气... 2019-04-21
米哈游客户端笔试题_Garena校招 游戏客户端开发通关面经 2019-04-21
airpodspro没有弹窗_使用AirPods Pro一天的主观感受 2019-04-21
创建物化视图commit_视图及范式 2019-04-21
函数传参字典_Python新手上车17:函数传递任意多个参数 2019-04-21
去掉数组最后一个元素_【一天一大 lee】在排序数组中查找元素的第一个和最后一个位置 (难度:中等) Day20201201... 2019-04-21
秦九韶算法递推公式_算法讲解之复杂度分析 2019-04-21
添加绝对路径_网站中如何添加绝对路径 2019-04-21