vue vue-quill-editor 富文本编辑器 （图片问题）+拦截粘贴动作 将粘贴的图片上传服务器

1.不管粘贴图片的问题

富文本编辑器默认的方式是图片转成base64 但是这个一张图片可能就把后台的默认字符长度占满了 所以需要先服务端上传图片的方式 代码如下

封装组件的方式应该复制了是能直接使用的

2.管粘贴的问题 拦截粘贴的图片并转换成文件上传到服务端

//配置项增加
  //图片粘贴拦截
                    clipboard: {
                        // 粘贴板，处理粘贴图片  *** 主要是这里
                        matchers: [[Node.ELEMENT_NODE, this.stopimgclip]],
                    },
//方法
 stopimgclip(node, Delta) {
            let ops = []
            Delta.ops.forEach(op => {
                if (op.insert && typeof op.insert === 'string') {
                    ops.push({
                        insert: op.insert,
                    })
                } else { //给出提醒
                    if (op.insert.image) {
                        //给个提示
                        this.$message({
                            message: '粘贴的内容是图片',
                            type: 'warning',

                        })
                        //调用方法
                        this.mybase64tofileandupload(op.insert.image)
                        // return
                    }
                }
            })
            Delta.ops = ops
            return Delta
        },
 stopimgclip(node, Delta) {
            let ops = []
            Delta.ops.forEach(op => {
                if (op.insert && typeof op.insert === 'string') {
                    ops.push({
                        insert: op.insert,
                    })
                } else { //给出提醒
                    if (op.insert.image) {
                        //给个提示
                        this.$message({
                            message: '粘贴的内容是图片',
                            type: 'warning',

                        })
                        //调用方法
                        this.mybase64tofileandupload(op.insert.image)
                        // return
                    }
                }
            })
            Delta.ops = ops
            return Delta
        },