From 790221ce9c7cba9fe455493c7a0e84695c021c3d Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期五, 26 一月 2024 15:03:33 +0800
Subject: [PATCH] Mr.Shi
---
company/src/components/common/UploadAvatarImage.vue | 40 +++++++++++++++++++++++++---------------
1 files changed, 25 insertions(+), 15 deletions(-)
diff --git a/company/src/components/common/UploadAvatarImage.vue b/company/src/components/common/UploadAvatarImage.vue
index e0d737e..6347a83 100644
--- a/company/src/components/common/UploadAvatarImage.vue
+++ b/company/src/components/common/UploadAvatarImage.vue
@@ -3,16 +3,18 @@
<el-upload
class="avatar-uploader"
accept=".png,.jpg"
+ :style="customStyle"
:action="uploadImgUrl"
:data="uploadData"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:on-error="uploadError"
:before-upload="beforeAvatarUpload">
- <template v-if="file.imgurlfull">
- <img :src="file.imgurlfull" class="avatar">
- </template>
- <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+ <img v-if="file.imgurlfull" :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>
@@ -25,16 +27,16 @@
type: Object,
default: () => {}
},
+ tipsLabel: '',
+ customStyle: {
+ type: String,
+ default: 'width: 90px; height: 90px;'
+ },
uploadData: Object
},
data() {
return {
- uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/uploadLocal',
- // uploadData: {
- // folder: 'upload',
- // type: 'image'
- // },
- imgurlfull: ''
+ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload'
}
},
@@ -42,10 +44,11 @@
// 涓婁紶鍥剧墖
handleAvatarSuccess(res, file) {
if (res.code == 200) {
- this.file.imgurl = res.data.imgaddr;
- this.file.imgurlfull = res.data.url;
- this.$tip.apiSuccess('涓婁紶鎴愬姛')
- this.$emit('uploadSuccess', { imgurl: res.data.imgaddr, imgurlfull: res.data.url })
+ 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.$tip.apiFailed('涓婁紶澶辫触')
}
@@ -83,11 +86,11 @@
border-color: #409EFF;
}
.avatar-uploader-icon {
+ line-height: 90px;
font-size: 28px;
color: #8c939d;
width: $image-width;
height: $image-width;
- line-height: $image-width;
text-align: center;
}
.avatar {
@@ -95,6 +98,13 @@
height: $image-width;
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{
--
Gitblit v1.9.3