From 5d938694d2b63fbf305a5a91178fff6e5603e917 Mon Sep 17 00:00:00 2001 From: limqsh <540344226@qq.com> Date: Tue, 19 May 2026 13:39:16 +0800 Subject: [PATCH] =?UTF-8?q?feat(upload):=20=E7=BB=9F=E4=B8=80=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E9=99=90=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SingleImage/index.vue | 27 ++++++++++--------- .../Tinymce/components/editorImage.vue | 14 +++++++++- src/views/about/us/edit.vue | 13 ++++----- src/views/announcement/edit.vue | 13 ++++----- src/views/coach/edit.vue | 14 +++++----- src/views/config/lanuch.vue | 12 ++++++--- src/views/member/add.vue | 12 +++++---- src/views/member/addEdit.vue | 12 +++++---- src/views/venue/edit.vue | 12 +++++---- src/views/venue/lesson/edit.vue | 12 ++++++++- 10 files changed, 91 insertions(+), 50 deletions(-) diff --git a/src/components/SingleImage/index.vue b/src/components/SingleImage/index.vue index f6fb7d2..709af85 100644 --- a/src/components/SingleImage/index.vue +++ b/src/components/SingleImage/index.vue @@ -4,7 +4,8 @@ class="avatar-uploader" action="/api/upload/image" :show-file-list="false" - :on-success="handleUploadSuccess" :on-progress="handleOverSize"> + :on-success="handleUploadSuccess" + :before-upload="beforeUpload"> @@ -32,6 +33,19 @@ export default { this.url = this.img }, methods: { + beforeUpload(file) { + // 校验图片大小，限制为1MB + const isLt1M = file.size / 1024 / 1024 < 1 + if (!isLt1M) { + Notification.error({ + title: '失败', + message: '上传图片大小不能超过 1MB!', + duration: 2000 + }) + return false + } + return true + }, handleUploadSuccess(response, file, fileList) { if (response.err_code !== 0) { Notification.error({ @@ -45,17 +59,6 @@ export default { this.handleSuccess(this.url) } } - }, - handleOverSize(event, file, fileList) { - const overSize = file.size / 1024 < 1024 - if (!overSize) { - fileList.length = 0 - Notification.error({ - title: '失败', - message: '请上传小于1M的图片', - duration: 2000 - }) - } } }, computed: { diff --git a/src/components/Tinymce/components/editorImage.vue b/src/components/Tinymce/components/editorImage.vue index 599d2cf..da40409 100644 --- a/src/components/Tinymce/components/editorImage.vue +++ b/src/components/Tinymce/components/editorImage.vue @@ -76,6 +76,13 @@ export default { } }, beforeUpload(file) { + // 校验图片大小，限制为1MB + const isLt1M = file.size / 1024 / 1024 < 1 + if (!isLt1M) { + this.$message.error('上传图片大小不能超过 1MB!') + return false + } + const _self = this const _URL = window.URL || window.webkitURL const fileName = file.uid @@ -85,8 +92,13 @@ export default { img.src = _URL.createObjectURL(file) img.onload = function() { _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height } + resolve(true) + } + img.onerror = function() { + _self.$message.error('图片加载失败!') + delete _self.listObj[fileName] + reject(new Error('图片加载失败')) } - resolve(true) }) } } diff --git a/src/views/about/us/edit.vue b/src/views/about/us/edit.vue index 3b01f0b..a2ea610 100644 --- a/src/views/about/us/edit.vue +++ b/src/views/about/us/edit.vue @@ -104,12 +104,13 @@ export default { }, beforeAvatarUpload(file) { - // const isLt2M = file.size / 1024 / 1024 < 2 - - // if (!isLt2M) { - // this.$message.error('上传头像图片大小不能超过 2MB!') - // } - // return isLt2M + // 校验图片大小，限制为1MB + const isLt1M = file.size / 1024 / 1024 < 1 + if (!isLt1M) { + this.$message.error('上传图片大小不能超过 1MB!') + return false + } + return true }, // 处理头像上传成功 diff --git a/src/views/announcement/edit.vue b/src/views/announcement/edit.vue index 8672c86..21440c6 100644 --- a/src/views/announcement/edit.vue +++ b/src/views/announcement/edit.vue @@ -158,12 +158,13 @@ export default { }, beforeAvatarUpload(file) { - // const isLt2M = file.size / 1024 / 1024 < 2 - - // if (!isLt2M) { - // this.$message.error('上传图片大小不能超过 2MB!') - // } - // return isLt2M + // 校验图片大小，限制为1MB + const isLt1M = file.size / 1024 / 1024 < 1 + if (!isLt1M) { + this.$message.error('上传图片大小不能超过 1MB!') + return false + } + return true }, /** diff --git a/src/views/coach/edit.vue b/src/views/coach/edit.vue index 1406060..8b6717a 100644 --- a/src/views/coach/edit.vue +++ b/src/views/coach/edit.vue @@ -26,7 +26,8 @@ class="avatar-uploader" action="/api/upload/image" :show-file-list="false" - :on-success="handleWechatSuccess"> + :on-success="handleWechatSuccess" + :before-upload="beforeAvatarUpload"> @@ -119,12 +120,13 @@ export default { this.form.wechatCode = res.img }, beforeAvatarUpload(file) { - const isLt2M = file.size / 1024 / 1024 < 0.3 - - if (!isLt2M) { - this.$message.error('上传头像图片大小不能超过 300kb !') + // 校验图片大小，限制为1MB + const isLt1M = file.size / 1024 / 1024 < 1 + if (!isLt1M) { + this.$message.error('上传图片大小不能超过 1MB!') + return false } - return isLt2M + return true }, // 处理头像上传成功 handleAvatarSuccess(res, file) { diff --git a/src/views/config/lanuch.vue b/src/views/config/lanuch.vue index 40d8bb3..8ea8ee3 100644 --- a/src/views/config/lanuch.vue +++ b/src/views/config/lanuch.vue @@ -6,7 +6,7 @@ @@ -41,8 +41,14 @@ export default { }) }, methods: { - handleBefore() { - + handleBefore(file) { + // 校验图片大小，限制为1MB + const isLt1M = file.size / 1024 / 1024 < 1 + if (!isLt1M) { + this.$message.error('上传图片大小不能超过 1MB!') + return false + } + return true }, handleSuccess(res) { this.form.value = res.err_msg diff --git a/src/views/member/add.vue b/src/views/member/add.vue index 1122471..6610594 100644 --- a/src/views/member/add.vue +++ b/src/views/member/add.vue @@ -160,11 +160,13 @@ export default { }) }, beforeAvatarUpload(file) { - // const isLt2M = file.size / 1024 / 1024 < 2 - // if (!isLt2M) { - // this.$message.error('上传头像图片大小不能超过 2MB!') - // } - // return isLt2M + // 校验图片大小，限制为1MB + const isLt1M = file.size / 1024 / 1024 < 1 + if (!isLt1M) { + this.$message.error('上传图片大小不能超过 1MB!') + return false + } + return true }, // 处理头像上传成功 handleAvatarSuccess(res, file) { diff --git a/src/views/member/addEdit.vue b/src/views/member/addEdit.vue index d5c1d3f..2ae8496 100644 --- a/src/views/member/addEdit.vue +++ b/src/views/member/addEdit.vue @@ -165,11 +165,13 @@ export default { }) }, beforeAvatarUpload(file) { - // const isLt2M = file.size / 1024 / 1024 < 2 - // if (!isLt2M) { - // this.$message.error('上传头像图片大小不能超过 2MB!') - // } - // return isLt2M + // 校验图片大小，限制为1MB + const isLt1M = file.size / 1024 / 1024 < 1 + if (!isLt1M) { + this.$message.error('上传图片大小不能超过 1MB!') + return false + } + return true }, // 处理头像上传成功 handleAvatarSuccess(res, file) { diff --git a/src/views/venue/edit.vue b/src/views/venue/edit.vue index 62d8060..f5e5313 100644 --- a/src/views/venue/edit.vue +++ b/src/views/venue/edit.vue @@ -553,11 +553,13 @@ export default { }, beforeAvatarUpload(file) { - // const isLt2M = file.size / 1024 / 1024 < 2 - // if (!isLt2M) { - // this.$message.error('上传头像图片大小不能超过 2MB!') - // } - // return isLt2M + // 校验图片大小，限制为1MB + const isLt1M = file.size / 1024 / 1024 < 1 + if (!isLt1M) { + this.$message.error('上传图片大小不能超过 1MB!') + return false + } + return true }, // 处理头像上传成功 handleAvatarSuccess(res, file) { diff --git a/src/views/venue/lesson/edit.vue b/src/views/venue/lesson/edit.vue index b5afe41..8e49489 100644 --- a/src/views/venue/lesson/edit.vue +++ b/src/views/venue/lesson/edit.vue @@ -100,7 +100,8 @@ list-type="picture-card" :file-list="imgs" :on-remove="handleImgRemove" - :on-success="handleImgSuccess"> + :on-success="handleImgSuccess" + :before-upload="beforeLessonImageUpload"> @@ -214,6 +215,15 @@ export default { } }, methods: { + beforeLessonImageUpload(file) { + // 校验图片大小，限制为1MB + const isLt1M = file.size / 1024 / 1024 < 1 + if (!isLt1M) { + this.$message.error('上传图片大小不能超过 1MB!') + return false + } + return true + }, onTagChange(value) { if (value.length > 0) { saveTag(value[value.length - 1])