From 4a34ae32407330c6600d24b065c7de2ad9a51d6b Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期五, 26 一月 2024 10:49:04 +0800
Subject: [PATCH] 开发业务接口
---
company/src/components/common/UploadAvatarImage.vue | 81 +++++++++++++++++++++++++---------------
1 files changed, 51 insertions(+), 30 deletions(-)
diff --git a/company/src/components/common/UploadAvatarImage.vue b/company/src/components/common/UploadAvatarImage.vue
index ac31f3c..e0d737e 100644
--- a/company/src/components/common/UploadAvatarImage.vue
+++ b/company/src/components/common/UploadAvatarImage.vue
@@ -1,18 +1,18 @@
<template>
<div>
<el-upload
- :style="customStyle"
+ class="avatar-uploader"
+ accept=".png,.jpg"
:action="uploadImgUrl"
:data="uploadData"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:on-error="uploadError"
:before-upload="beforeAvatarUpload">
- <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>
+ <template v-if="file.imgurlfull">
+ <img :src="file.imgurlfull" class="avatar">
+ </template>
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
@@ -25,16 +25,16 @@
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/uploadLocal',
+ // uploadData: {
+ // folder: 'upload',
+ // type: 'image'
+ // },
+ imgurlfull: ''
}
},
@@ -42,36 +42,41 @@
// 涓婁紶鍥剧墖
handleAvatarSuccess(res, file) {
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 })
+ 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 })
} 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;
+.avatar-uploader {
+ width: $image-width;
+ height: $image-width;
+}
::v-deep .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
+ width: $image-width;
+ height: $image-width;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
@@ -80,18 +85,34 @@
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
- line-height: 90px;
+ width: $image-width;
+ height: $image-width;
+ line-height: $image-width;
text-align: center;
}
.avatar {
+ width: $image-width;
+ 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{
+ 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