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
,如下
将富文本中插入的图片上传服务器、富文本的 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年03月01日 10时58分01秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
linux 模拟键盘输入到进程,Linux 下模拟键盘输入
2019-04-21
linux服务器上已安装R 用户下载R包,R语言安装R package的2种方法
2019-04-21
linux下mysql 备份方法,Linux下mysql数据库备份方法小结
2019-04-21
肺部ct重建_胸片检查容易漏诊肺癌,去年正常今年晚期常发生,体检一定要做CT...
2019-04-21
x86so文件装换成arm64位_64位系统正式发布说明及介绍!!
2019-04-21
for循环中取出最大最小 累加_LeetCode之长度最小的子数组
2019-04-21
如何打开老公人脸识别_【话题】南宁已有小区启用人脸识别门禁,有人点赞有人忧...
2019-04-21
makex机器人程序_机器人教育为相城青少年叩开科学世界大门
2019-04-21
米哈游客户端笔试题_Garena校招 游戏客户端开发通关面经
2019-04-21
airpodspro没有弹窗_使用AirPods Pro一天的主观感受
2019-04-21
创建物化视图commit_视图及范式
2019-04-21
函数传参字典_Python新手上车17:函数传递任意多个参数
2019-04-21
秦九韶算法递推公式_算法讲解之复杂度分析
2019-04-21
添加绝对路径_网站中如何添加绝对路径
2019-04-21