From d2bc6e096f0806b78ea92d4b90a21d3627d406c7 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期五, 08 三月 2024 18:28:42 +0800
Subject: [PATCH] mrshi
---
company/src/components/common/UploadAvatarImage.vue | 64 +++++++++++++++++++++----------
1 files changed, 43 insertions(+), 21 deletions(-)
diff --git a/company/src/components/common/UploadAvatarImage.vue b/company/src/components/common/UploadAvatarImage.vue
index c19e154..7d5ddae 100644
--- a/company/src/components/common/UploadAvatarImage.vue
+++ b/company/src/components/common/UploadAvatarImage.vue
@@ -1,6 +1,8 @@
<template>
<div>
<el-upload
+ class="avatar-uploader"
+ accept=".png,.jpg"
:style="customStyle"
:action="uploadImgUrl"
:data="uploadData"
@@ -8,14 +10,14 @@
:on-success="handleAvatarSuccess"
:on-error="uploadError"
:before-upload="beforeAvatarUpload">
- <img v-if="file.imgurlfull" :src="file.imgurlfull" :style="customStyle" class="avatar">
+ <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>
@@ -25,25 +27,19 @@
type: Object,
default: () => {}
},
- uploadData: Object,
tipsLabel: '',
customStyle: {
type: String,
default: 'width: 90px; height: 90px;'
- }
+ },
+ uploadData: Object
},
data() {
return {
- uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload',
- // uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/uploadPicture',
- // uploadData: {
- // folder: 'upload',
- // type: 'image'
- // },
- imgurlfull: ''
+ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload'
}
},
-
+
methods: {
// 涓婁紶鍥剧墖
handleAvatarSuccess(res, file) {
@@ -51,29 +47,32 @@
let { data } = res
this.file.imgurl = data.imgaddr;
this.file.imgurlfull = data.url;
- console.log(this.file);
this.$message.success('涓婁紶鎴愬姛')
- this.$emit('uploadSuccess', { imgurl: data.imgaddr, imgurlfull: data.url })
+ this.$emit('uploadSuccess', { imgurl: data.imgaddr, imgurlfull: data.url, name: data.originname })
} else {
- this.$message.error('涓婁紶澶辫触')
+ this.$tip.apiFailed('涓婁紶澶辫触')
}
this.$emit('uploadEnd')
},
uploadError() {
- this.$message.error('涓婁紶澶辫触')
+ this.$tip.apiFailed('涓婁紶澶辫触')
this.$emit('endUpload')
},
// // 鎷︽埅
beforeAvatarUpload(file) {
this.$emit('uploadBegin')
- return true;
- },
- },
+ return true
+ }
+ }
}
</script>
<style lang="scss" scoped>
-$image-width: 100px;
+$image-width: 90px;
+.avatar-uploader {
+ width: $image-width;
+ height: $image-width;
+}
::v-deep .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
@@ -85,12 +84,16 @@
border-color: #409EFF;
}
.avatar-uploader-icon {
+ line-height: 90px;
font-size: 28px;
color: #8c939d;
- line-height: 90px;
+ width: $image-width;
+ height: $image-width;
text-align: center;
}
.avatar {
+ width: 100% !important;
+ height: auto !important;
display: block;
}
.tips-style {
@@ -101,4 +104,23 @@
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