From 9057e04efad1b7d61c77a72e5c37a504d0aee935 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期五, 26 九月 2025 09:24:03 +0800
Subject: [PATCH] H5静态化
---
admin/src/components/common/UploadAvatarImage.vue | 141 +++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 141 insertions(+), 0 deletions(-)
diff --git a/admin/src/components/common/UploadAvatarImage.vue b/admin/src/components/common/UploadAvatarImage.vue
new file mode 100644
index 0000000..faafd40
--- /dev/null
+++ b/admin/src/components/common/UploadAvatarImage.vue
@@ -0,0 +1,141 @@
+<template>
+ <div>
+ <el-upload class="avatar-uploader" accept=".png,.jpg,.jpeg" :style="customStyle" :action="uploadImgUrl"
+ :data="uploadData" :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="uploadError"
+ :before-upload="beforeAvatarUpload">
+ <img v-if="file.imgurlfull" style="width: 100%;" :src="file.imgurlfull" :style="customStyle" class="avatar">
+ <div v-else :style="customStyle">
+ <i class="el-icon-plus avatar-uploader-icon"></i>
+ <div class="tips-style">{{ tipsLabel }}</div>
+ </div>
+ </el-upload>
+ </div>
+
+</template>
+
+<script>
+import { Loading } from 'element-ui'
+export default {
+ props: {
+ file: {
+ type: Object,
+ default: () => { }
+ },
+ tipsLabel: '',
+ customStyle: {
+ type: String,
+ default: 'width: 90px; max-height: 90px;'
+ },
+ uploadData: Object
+ },
+ data() {
+ return {
+ loading: null,
+ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/web/public/uploadLocal'
+ }
+ },
+
+ methods: {
+ // 涓婁紶鍥剧墖
+ handleAvatarSuccess(res, file) {
+ this.$nextTick(() => { // 浠ユ湇鍔＄殑鏂瑰紡璋冪敤鐨� Loading 闇�瑕佸紓姝ュ叧闂�
+ this.loading.close()
+ })
+ if (res.code == 200) {
+ let { data } = res
+ this.file.imgurl = data.imgaddr
+ this.file.imgurlfull = data.url
+ this.$message.success('涓婁紶鎴愬姛')
+ this.$emit('uploadSuccess', { imgurl: data.imgaddr, imgurlfull: data.url, name: data.originname })
+ } else {
+ this.$message.error('涓婁紶澶辫触')
+ }
+ this.$emit('uploadEnd')
+ },
+ uploadError() {
+ this.$message.error('涓婁紶澶辫触')
+ this.$nextTick(() => { // 浠ユ湇鍔＄殑鏂瑰紡璋冪敤鐨� Loading 闇�瑕佸紓姝ュ叧闂�
+ this.loading.close()
+ })
+ this.$emit('uploadEnd')
+ },
+ // // 鎷︽埅
+ beforeAvatarUpload(file) {
+ this.loading = Loading.service({
+ lock: true,
+ text: 'Loading',
+ spinner: 'el-icon-loading',
+ background: 'rgba(0, 0, 0, 0.7)'
+ })
+ this.$emit('uploadBegin')
+ return true
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+$image-width: 90px;
+
+.avatar-uploader {
+ width: $image-width;
+ height: $image-width;
+}
+
+::v-deep .el-upload {
+ border: 1px dashed #d9d9d9;
+ border-radius: 6px;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+ border-color: #409EFF;
+}
+
+.avatar-uploader-icon {
+ line-height: 90px;
+ font-size: 28px;
+ color: #8c939d;
+ width: $image-width;
+ height: $image-width;
+ text-align: center;
+}
+
+.avatar {
+ width: 90px;
+ max-height: 90px;
+ display: block;
+}
+
+.tips-style {
+ height: 13px;
+ font-size: 13px;
+ font-weight: 400;
+ color: #999999;
+ line-height: 13px;
+}
+</style>
+<style lang="scss" scoped>
+::v-deep .el-upload--picture-card {
+ width: 90px !important;
+ height: 90px !important;
+}
+
+::v-deep .el-upload-list__item {
+ width: 90px !important;
+ height: 90px !important;
+}
+
+.icon {
+ -webkit-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(0%, -85%);
+}
+
+::v-deep .el-upload-list__item {
+ width: 90px !important;
+ height: 90px !important;
+}
+</style>
--
Gitblit v1.9.3