From bb87f35797f5955fb4e7a8a7b886fa4c9cdc9069 Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期日, 25 七月 2021 08:57:01 +0800 Subject: [PATCH] 富文本新增上传文件大小限制 --- ruoyi-ui/src/components/Editor/index.vue | 26 ++++++++++++++++++-------- 1 files changed, 18 insertions(+), 8 deletions(-) diff --git a/ruoyi-ui/src/components/Editor/index.vue b/ruoyi-ui/src/components/Editor/index.vue index 33b3a62..6bb5a18 100644 --- a/ruoyi-ui/src/components/Editor/index.vue +++ b/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; -- Gitblit v1.9.2