el-tiptap富文本框拖拽和复制的图片会跳过上传服务器解决方案

最近在业务上遇到个问题,因为富文本框存在一个漏洞,正常使用菜单栏上面的上传图片,会先传到服务器上,再将服务器返回的地址传给后端接口,但是通过拖拽或者复制的图片,依旧是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内容,则将用户之前填写的内容覆盖用户新填写的内容,并且提示用户“不支持复制上传图片,请通过上方菜单形式上传图片”

猜你喜欢

转载自blog.csdn.net/weixin_44949068/article/details/129198198
今日推荐