venue/venue_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(upload): 统一图片上传组件文件大小限制

Browse Source
This commit is contained in:
limqsh
2026-05-19 13:39:16 +08:00
parent 7ca81ff307
commit 5d938694d2
10 changed files with 91 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/SingleImage/index.vue
View File

@@ -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">
<img v-if="getImg" :src="getImg" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
@@ -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: {

14
src/components/Tinymce/components/editorImage.vue
View File

@@ -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)
})
}
}

13
src/views/about/us/edit.vue
View File

@@ -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
},
// 处理头像上传成功

13
src/views/announcement/edit.vue
View File

@@ -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
},
/**

14
src/views/coach/edit.vue
View File

@@ -26,7 +26,8 @@
class="avatar-uploader"
action="/api/upload/image"
:show-file-list="false"
:on-success="handleWechatSuccess">
:on-success="handleWechatSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.wechatCode" :src="form.wechatCode" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
@@ -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) {

12
src/views/config/lanuch.vue
View File

@@ -6,7 +6,7 @@
<el-upload
class="avatar-uploader"
accept="image/*"
action="/api/upload/uploadImg"
action="/api/upload/image"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="handleBefore">
@@ -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

12
src/views/member/add.vue
View File

@@ -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) {

12
src/views/member/addEdit.vue
View File

@@ -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) {

12
src/views/venue/edit.vue
View File

@@ -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) {

12
src/views/venue/lesson/edit.vue
View File

@@ -100,7 +100,8 @@
list-type="picture-card"
:file-list="imgs"
:on-remove="handleImgRemove"
:on-success="handleImgSuccess">
:on-success="handleImgSuccess"
:before-upload="beforeLessonImageUpload">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
@@ -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])