最近在业务上遇到个问题,因为富文本框存在一个漏洞,正常使用菜单栏上面的上传图片,会先传到服务器上,再将服务器返回的地址传给后端接口,但是通过拖拽或者复制的图片,依旧是base64格式,查看官方文档也没找到对应的解决方法,所以我使用以下方法,先上代码,再讲思路:
1、首先在组件中添加@onUpdate事件,只要用户输入内容就会触发
<el-tiptap v-model="content" :extensions="extensions" placeholder="商品详细介绍,限2000字" lang="zh" height="574" @onBlur="onEditorBlur" @onUpdate="onEditorUpdate" />
2、在data中添加一个字段,用于保存复制图片前的内容
data () {
return {
// 编辑器的内容
content: '',
// 保存之前的内容
beforeContent: ''
}
}
3、以下就是监听的onEditorUpdate方法,每次触发的时候进行监听排查
methods: {
onEditorUpdate(){
console.log('现在',this.content)
console.log('之前',this.beforeContent)
let reg = new RegExp("src=\"data:image/")
if(reg.test(this.content)){
this.$nextTick(()=>{
this.content = this.beforeContent
this.$message({
type: 'warning',
message: '不支持复制上传图片,请通过上方菜单形式上传图片'
})
})
}else{
this.beforeContent = this.content
}
}
}
4、其实主要思路就是,如果用户通过复制或者拖拽的图片,用正则匹配,找到base64内容,则将用户之前填写的内容覆盖用户新填写的内容,并且提示用户“不支持复制上传图片,请通过上方菜单形式上传图片”