From 38507a5fa78405da2fe099baa5cf7f2e908d7f1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Wed, 12 Jan 2022 00:20:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(SingleUpload.vue):=20=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=E5=88=A0=E9=99=A4=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/SingleUpload.vue | 43 +++++++++++++++++++-------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/Upload/SingleUpload.vue b/src/components/Upload/SingleUpload.vue
index 1b42e49e..bb825a68 100644
--- a/src/components/Upload/SingleUpload.vue
+++ b/src/components/Upload/SingleUpload.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div >
     <el-upload
-        class="avatar-uploader"
         action=""
+        class="avatar-uploader"
         list-type="picture-card"
         :show-file-list="false"
         :before-upload="handleBeforeUpload"
@@ -16,15 +16,25 @@
       <el-icon v-else class="avatar-uploader-icon">
         <Plus/>
       </el-icon>
+
+      <el-icon
+          v-if="imgUrl"
+          class="remove-icon"
+          @click.stop="handleRemove(imgUrl)"
+      >
+        <Close/>
+      </el-icon>
+
     </el-upload>
   </div>
 </template>
 
 <script setup lang="ts">
 import {computed, reactive, toRefs} from "vue";
-import {Plus} from '@element-plus/icons-vue'
+import {Plus, Close} from '@element-plus/icons-vue'
 import {ElMessage} from "element-plus"
-import {deleteFile, uploadFile} from "@/api/system/file";
+import {uploadFile, deleteFile} from "@/api/system/file";
+
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
@@ -55,10 +65,10 @@ const imgUrl = computed({
 function handleBeforeUpload(file: any) {
   const isJPG = file.type === 'image/jpeg'
   const isLt2M = file.size / 1024 / 1024 < 2
- /* if (!isJPG) {
-    ElMessage.warning("此文件非图片文件")
-    return false
-  }*/
+  /* if (!isJPG) {
+     ElMessage.warning("此文件非图片文件")
+     return false
+   }*/
 
   if (!isLt2M) {
     ElMessage.warning("上传图片不能大于2M")
@@ -83,10 +93,9 @@ function handleExceed(file: any) {
   ElMessage.warning('最多只能上传' + props.maxCount)
 }
 
-
-function handleRemove(file: any, fileList: Array<any>) {
-  deleteFile(file.url)
-  emit('update:modelValue', fileList)
+function handleRemove(imgUrl: string) {
+  deleteFile(imgUrl)
+  emit('update:modelValue', '')
 }
 </script>
 
@@ -116,4 +125,14 @@ function handleRemove(file: any, fileList: Array<any>) {
   height: 148px;
   display: block;
 }
+
+.remove-icon {
+  font-size: 12px;
+  color: #ff4d51 !important;
+  margin-top: 0px !important;
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: #409eff;
+}
 </style>