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

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"
@@ -46,6 +47,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    // 上传文件大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
     /* 类型（base64格式、url格式） */
     type: {
       type: String,
@@ -130,14 +136,6 @@ export default {
             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 @@ export default {
         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;