From 2a4cf90586a1d86d4d9b177f02c97bb43a2d147b Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Sat, 15 May 2021 17:23:54 +0800
Subject: [PATCH] UP

---
 src/components/scUpload/index.vue | 50 ++++++++++++++++++++-----------
 src/views/setting/user/save.vue   |  2 +-
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/components/scUpload/index.vue b/src/components/scUpload/index.vue
index 3ecc93e6..7c91ad12 100644
--- a/src/components/scUpload/index.vue
+++ b/src/components/scUpload/index.vue
@@ -1,15 +1,16 @@
 <template>
-	<div class="sc-upload">
-		<div v-show="img!=''" class="sc-upload-file">
+	<div class="sc-upload" v-loading="loading">
+		<div v-if="tempImg || img" class="sc-upload-file">
 			<div class="mask">
 				<span class="del" @click.stop="del"><i class="el-icon-delete"></i></span>
 			</div>
-			<el-image class="file" :src="img" :preview-src-list="[img]" hide-on-click-modal append-to-body></el-image>
+			<el-image class="file" :src="tempImg || img" :preview-src-list="[img]" hide-on-click-modal append-to-body></el-image>
 		</div>
-		<div v-show="img==''" class="sc-upload-uploader">
+		<div v-else class="sc-upload-uploader">
 			<el-upload ref="upload" v-loading="loading" class="uploader" accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg" action="https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api/upload" :show-file-list="false" :before-upload="before" :on-success="success" :on-error="error">
 				<div class="file-empty">
-					上传
+					<i class="el-icon-plus"></i>
+					<h4>{{title}}</h4>
 				</div>
 			</el-upload>
 		</div>
@@ -20,12 +21,14 @@
 <script>
 	export default {
 		props: {
-			modelValue: { type: String, default: "" }
+			modelValue: { type: String, default: "" },
+			title: { type: String, default: "上传" },
 		},
 		data() {
 			return {
 				loading: false,
-				img: ""
+				img: "",
+				tempImg: ""
 			}
 		},
 		watch:{
@@ -42,16 +45,25 @@
 		},
 		methods: {
 			before(file){
-				this.img = URL.createObjectURL(file);
+				this.tempImg = URL.createObjectURL(file);
 				this.loading = true;
 			},
 			success(res){
 				this.loading = false;
-				this.img = res.data.src;
+				this.tempImg = "";
+				if(res.code != 200){
+					this.$message.warning(res.message || "上传文件未知错误")
+				}else{
+					this.img = res.data.src;
+				}
 			},
 			error(err){
-				console.log(err.message);
+				this.$notify.error({
+					title: '上传文件错误',
+					message: err
+				})
 				this.loading = false;
+				this.tempImg = "";
 				this.img = ""
 			},
 			del(){
@@ -63,20 +75,24 @@
 
 <style scoped>
 
-	.el-form-item.is-error .sc-upload {border: 1px solid #F56C6C;}
+	.el-form-item.is-error .sc-upload-uploader {border: 1px dashed #F56C6C;}
 
-	.sc-upload {width: 100px;height: 100px;}
-	.sc-upload-file {position: relative;width: 100px;height: 100px;}
+	.sc-upload {width: 120px;height: 120px;}
+	.sc-upload:hover {}
+
+	.sc-upload-file {position: relative;width: 100%;height: 100%;}
 	.sc-upload-file .mask {display: none;position: absolute;top:0px;right:0px;line-height: 1;z-index: 1;}
 	.sc-upload-file .mask span {display: inline-block;width: 25px;height:25px;line-height: 23px;text-align: center;cursor: pointer;color: #fff;}
 	.sc-upload-file .mask span i {font-size: 12px;}
 	.sc-upload-file .mask .del {background: #F56C6C;}
-	.sc-upload-file .file {width: 100px;height: 100px;}
+	.sc-upload-file .file {width: 120px;height: 120px;}
 	.sc-upload-file .file img {vertical-align: bottom;}
 	.sc-upload-file:hover .mask {display: inline-block;}
 
 
-	.sc-upload-uploader {}
-	.sc-upload-uploader .file-empty {width: 100px;height: 100px;background: #f5f5f5;}
-
+	.sc-upload-uploader {border: 1px dashed #d9d9d9;}
+	.sc-upload-uploader:hover {border: 1px dashed #409eff;}
+	.sc-upload-uploader .file-empty {width: 118px;height: 118px;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
+	.sc-upload-uploader .file-empty i {font-size: 28px;color: #8c939d;}
+	.sc-upload-uploader .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}
 </style>
diff --git a/src/views/setting/user/save.vue b/src/views/setting/user/save.vue
index 3ec2b25a..735125d3 100644
--- a/src/views/setting/user/save.vue
+++ b/src/views/setting/user/save.vue
@@ -3,7 +3,7 @@
 		<el-row :gutter="20">
 			<el-col :span="24">
 				<el-form-item label="头像" prop="avatar">
-					<sc-upload v-model="form.avatar"></sc-upload>
+					<sc-upload v-model="form.avatar" title="上传头像"></sc-upload>
 				</el-form-item>
 			</el-col>
 		</el-row>