vue-quill-editor插入图片路径太长问题解决方法
作者:大海我来了 时间:2024-05-29 22:46:29
最近做项目的时候有一个发布新闻的需求,新闻编辑的时候要求能发布带格式的文本内容和能展示支持图片。
由于项目是用 Vue 开发的,所以找编辑器的时候选了 vue-quill-editor 。编辑器长如下的样子:
现在的问题
但是这个编辑器会把插入的图片会转成 base64 位的编码,使得编辑器内容保存进数据库的时候会超出限制长度,从而报错。
从问题来源着手
首先要明白导致这个问题的原因是 vue-quill-editor 编辑器默认把上传的图片给转成 base64 编码,那是不是有这么一个配置参数可以设置上传后图片的格式呢?经过一番文档的查找,貌似是没有。但是提供了一个 handlers 可以自定义图片上传的方式,那就从这里下文章。大概意思是点击这个图片按钮的时候,会出发一个回调,可以在回调里触发自己的文件上传开关。这里我用的文件上传是 element-ui 的 el-upload。
安装vue-quill-editor
npm install vue-quill-editor --save
配置vue-quill-editor
配置 html
<quill-editor
v-model="ruleForm.content"
ref="myQuillEditor"
:options="editorOption"
class="ql-editor"
:class="operationType.includes('check') ? 'disabled' : ''"
:disabled="operationType.includes('check')"
>
</quill-editor>
导入vue-quill-editor 且设置components:
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}
设置options:
editorOption:{
modules: {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
['clean'],
['link', 'image']
],
handlers: {
image: function(value) {
if (value) {
// 触发element-ui的文件上传
document.querySelector(".avatar-uploader input").click();
} else {
this.quill.format("image", false);
}
},
}
}
},
placeholder: '请输入',
},
引入相关style:
<style lang="scss">
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.snow.css';
@import '~quill/dist/quill.bubble.css';
</style>
配置el-upload
template:
<el-upload
ref="quillUploader"
class="avatar-uploader"
:action="serverUrl"
:show-file-list="false"
:auto-upload="false"
:on-change="onChangeQuill"
:before-upload="beforeUpload"
:limit="20"
:multiple="true"
:accept="acceptFile">
</el-upload>
onChange的时候执行文件上传,这里的文件上传用的是腾讯的对象存储服务,cosUtils封装了一些对象存储的一些工具方法,你们可以自行替换成自己后端的上传接口。下面这段代码的大概意思是文件上传到对象存储服务器成功之后,拿到具体的图片地址,插入到编辑器光标所在的位置,这个时候图片就显示出来了。
onChangeQuill(file, fileList) {
let fileName = file.uid + file.name
cosUtils.putObject(fileName, file.raw, 'operate/', (err, data) => { // 新闻图片存到operate/目录下
console.log(err || data)
if (!err) {
let quill = this.$refs.myQuillEditor.quill
let length = quill.getSelection().index
// 图片上传到对象存储后的具体地址
let imgSrc = `https://xxxxxxx.cos.ap-shanghai.myqcloud.com/operate/${fileName}`
quill.insertEmbed(length, "image", imgSrc)
// 调整光标到最后
quill.setSelection(length + 1)
}
})
}
来源:https://juejin.cn/post/6914816401190420494
标签:vue-quill-editor,图片,路径太长
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
微信小程序顶部导航栏可滑动并选中放大
2023-08-23 18:49:59
![](https://img.aspxhome.com/file/2023/8/56168_0s.gif)
python中使用urllib2伪造HTTP报头的2个方法
2022-10-19 07:05:06
sqlserver锁表、解锁、查看销表的方法
2024-01-12 15:57:38
vue基础语法之插值表达式详解
2024-05-10 14:10:48
![](https://img.aspxhome.com/file/2023/8/126568_0s.jpg)
Python 之 Json序列化嵌套类方式
2021-05-25 18:11:44
![](https://img.aspxhome.com/file/2023/9/107119_0s.jpg)
mysql 让一个存储过程定时作业的代码
2024-01-26 18:35:28
![](https://img.aspxhome.com/file/2023/1/115331_0s.png)
无法在Web服务器上启动调试。未将项目配置为进行调试
2024-03-21 03:11:13
Mysql查询最近一条记录的sql语句(优化篇)
2024-01-17 02:33:57
python跨文件使用全局变量的实现
2022-03-31 17:24:36
golang中new与make的区别讲解
2024-05-09 14:55:15
![](https://img.aspxhome.com/file/2023/8/127378_0s.png)
OpenCV图像变换之傅里叶变换的一些应用
2023-12-01 22:11:34
![](https://img.aspxhome.com/file/2023/9/85359_0s.jpg)
EasyASP v1.5发布(包含数据库操作类,原clsDbCtrl.asp)第1/2页
2011-04-08 10:40:00
Python Flask前后端Ajax交互的方法示例
2021-09-07 09:09:21
![](https://img.aspxhome.com/file/2023/0/75230_0s.png)
python中如何设置list步长
2022-11-04 14:24:02
利用js将ajax获取到的后台数据动态加载至网页中的方法
2024-04-16 10:37:03
![](https://img.aspxhome.com/file/2023/2/136582_0s.jpg)
SQL中JOIN和UNION区别、用法及示例介绍
2012-08-21 10:47:22
在 Python 中进行 One-Hot 编码
2023-04-06 06:02:55
![](https://img.aspxhome.com/file/2023/7/105047_0s.png)
Python 如何手动编写一个自己的LRU缓存装饰器的方法实现
2022-08-04 13:06:10
Pytorch中expand()的使用(扩展某个维度)
2023-11-05 19:54:47
![](https://img.aspxhome.com/file/2023/2/131492_0s.png)
使用Python对接OpenAi API实现智能QQ机器人的方法
2023-08-12 10:24:25
![](https://img.aspxhome.com/file/2023/2/121142_0s.png)