富文本新增上传文件大小限制

RuoYi

2021-07-25 bb87f35797f5955fb4e7a8a7b886fa4c9cdc9069

富文本新增上传文件大小限制

 ruoyi-ui/src/components/Editor/index.vue

@@ -2,6 +2,7 @@
  <div>
    <el-upload
      :action="uploadUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      name="file"
@@ -45,6 +46,11 @@
    readOnly: {
      type: Boolean,
      default: false,
    },
    // 上传文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    /* 类型（base64格式、url格式） */
    type: {
@@ -130,14 +136,6 @@
            this.quill.format("image", false);
          }
        });
        // toolbar.addHandler("video", (value) => {
        //   this.uploadType = "video";
        //   if (value) {
        //     this.$refs.upload.$children[0].$refs.input.click();
        //   } else {
        //     this.quill.format("video", false);
        //   }
        // });
      }
      this.Quill.pasteHTML(this.currentValue);
      this.Quill.on("text-change", (delta, oldDelta, source) => {
@@ -158,6 +156,18 @@
        this.$emit("on-editor-change", eventName, ...args);
      });
    },
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    handleUploadSuccess(res, file) {
      // 获取富文本组件实例
      let quill = this.Quill;