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

YunaiV
1 parent 2579e854
Showing 1 changed file with 18 additions and 8 deletions
yudao-ui-admin/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;