项目中粘贴图片过大 富文本内容上传后台服务器上传不到。

解决办法:
不允许粘贴图片

//添加匹粘贴板事件

 handleCustomMatcher(node, Delta) {
      let ops = []
      Delta.ops.forEach(op => {
        if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片,这里会是一个对象,所以可以这样处理
          ops.push({
            insert: op.insert,
          })
        }else{
          this.$message({
            message:'不允许粘贴图片,请手动上传',
            type:'warning'
          })
        }
      })
      Delta.ops = ops
      return Delta
    },

//quill 富文本配置

editorOption: {
         placeholder: '',//
          modules:{
            clipboard: {
              // 粘贴版,处理粘贴时候带图片
              matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
            },
            toolbar: {
              container: [
                ['bold', 'italic', 'underline', 'strike'],    //加粗,斜体,下划线,删除线
                ['blockquote'],     //引用,代码块
                [{ 'header': 1 }, { 'header': 2 }],        // 标题,键值对的形式;1、2表示字体大小
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
                [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
                [{ 'color': [] }, { 'background': [] }],     // 字体颜色,字体背景颜色
                ['image']    //上传图片、上传视频
              ],
              handlers: {
                  'image': function (value) {
                      if (value) {
                          // 触发input框选择图片文件
                          document.querySelector('.avatar-uploader input').click()
                      } else {
                          this.quill.format('image', false);
                      }
                  }
              }
            }
        },
        theme:'snow'
      },
Logo

前往低代码交流专区

更多推荐