From 6a1679594eab95fa8827008d7af11283bcd7ea3e Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期三, 25 十二月 2024 18:33:46 +0800
Subject: [PATCH] ll
---
admin/src/components/common/UploadAvatarImage.vue | 63 +++++++++++++++++++------------
1 files changed, 39 insertions(+), 24 deletions(-)
diff --git a/admin/src/components/common/UploadAvatarImage.vue b/admin/src/components/common/UploadAvatarImage.vue
index 7d5ddae..dfd5d22 100644
--- a/admin/src/components/common/UploadAvatarImage.vue
+++ b/admin/src/components/common/UploadAvatarImage.vue
@@ -1,16 +1,9 @@
<template>
<div>
- <el-upload
- class="avatar-uploader"
- accept=".png,.jpg"
- :style="customStyle"
- :action="uploadImgUrl"
- :data="uploadData"
- :show-file-list="false"
- :on-success="handleAvatarSuccess"
- :on-error="uploadError"
+ <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">
+ <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>
@@ -21,45 +14,59 @@
</template>
<script>
+import { Loading } from 'element-ui'
export default {
props: {
file: {
type: Object,
- default: () => {}
+ default: () => { }
},
tipsLabel: '',
customStyle: {
type: String,
- default: 'width: 90px; height: 90px;'
+ default: 'width: 90px; max-height: 90px;'
},
uploadData: Object
},
data() {
return {
- uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload'
+ loading: null,
+ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/upload'
}
},
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.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('涓婁紶澶辫触')
+ this.$message.error('涓婁紶澶辫触')
}
this.$emit('uploadEnd')
},
uploadError() {
- this.$tip.apiFailed('涓婁紶澶辫触')
- this.$emit('endUpload')
+ 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
}
@@ -69,10 +76,12 @@
<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;
@@ -80,9 +89,11 @@
position: relative;
overflow: hidden;
}
+
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
+
.avatar-uploader-icon {
line-height: 90px;
font-size: 28px;
@@ -91,11 +102,13 @@
height: $image-width;
text-align: center;
}
+
.avatar {
- width: 100% !important;
- height: auto !important;
+ width: 90px;
+ max-height: 90px;
display: block;
}
+
.tips-style {
height: 13px;
font-size: 13px;
@@ -105,22 +118,24 @@
}
</style>
<style lang="scss" scoped>
-::v-deep .el-upload--picture-card{
+::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%);
+ -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