From ba9debb47de67a8d87ed6571a3e096bb6d33d017 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sat, 22 Jan 2022 23:59:55 +0800
Subject: [PATCH] =?UTF-8?q?fix(SingleUpload.vue):=20=E5=8D=95=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=8A=E4=BC=A0=E6=97=B6=E5=80=99=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E7=9A=84=E6=96=87=E4=BB=B6=E6=97=A0=E6=B3=95=E8=A6=86=E7=9B=96?=
 =?UTF-8?q?=E4=B9=8B=E5=89=8D=E7=9A=84=E6=96=87=E4=BB=B6=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/Upload/SingleUpload.vue b/src/components/Upload/SingleUpload.vue
index 7fb3c29c..11aa93a4 100644
--- a/src/components/Upload/SingleUpload.vue
+++ b/src/components/Upload/SingleUpload.vue
@@ -1,26 +1,26 @@
 <template>
-  <div >
+  <div>
     <el-upload
+        ref="uploadRef"
         action=""
         class="avatar-uploader"
         list-type="picture-card"
         :show-file-list="false"
         :before-upload="handleBeforeUpload"
         :on-exceed="handleExceed"
-        :on-remove="handleRemove"
         :limit="1"
         :http-request="uploadImage"
     >
-      <img v-if="imgURL" :src="imgURL" class="avatar"/>
+      <img v-if="imgUrl" :src="imgUrl" class="avatar"/>
 
       <el-icon v-else class="avatar-uploader-icon">
         <Plus/>
       </el-icon>
 
       <el-icon
-          v-if="imgURL"
+          v-if="imgUrl"
           class="remove-icon"
-          @click.stop="handleRemove(imgURL)"
+          @click.stop="handleRemove(imgUrl)"
       >
         <Close/>
       </el-icon>
@@ -30,38 +30,64 @@
 </template>
 
 <script setup lang="ts">
-import {computed, reactive} from "vue";
+import {computed, ref} from "vue";
 import {Plus, Close} from '@element-plus/icons-vue'
-import {ElMessage} from "element-plus"
+import {ElMessage, ElUpload} from "element-plus"
 import {uploadFile, deleteFile} from "@/api/system/file";
+import {UploadFile} from "element-plus/es/components/upload/src/upload.type";
 
+const uploadRef = ref(ElUpload)
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
   modelValue: {
     type: String,
     default: ''
-  },
-  maxCount: {
-    type: Number,
-    default: 1
   }
 })
 
-const state = reactive({
-  previewImgUrl: '',
-  previewDialogVisible: false,
-})
-
-const imgURL = computed<string>({
+const imgUrl = computed<string | null>({
   get() {
     return props.modelValue
   },
   set(val) {
+    // imgUrl改变时触发修改父组件绑定的v-model的值
     emit('update:modelValue', val)
   }
 })
 
+
+/**
+ * 自定义图片上传
+ *
+ * @param params
+ */
+function uploadImage({file}: any) {
+  uploadFile(file).then(response => {
+     imgUrl.value = response.data
+  })
+}
+
+/**
+ * 后选择文件覆盖前面的文件
+ *
+ * Set limit and on-exceed to automatically replace the previous file when select a new file.
+ *
+ * @param files
+ */
+function handleExceed(files: UploadFile[]) {
+  uploadRef.value.clearFiles()
+  uploadRef.value.handleStart(files[0])
+  uploadFile(files[0]).then(response => {
+    imgUrl.value = response.data
+  })
+}
+
+function handleRemove(file: string) {
+  deleteFile(file)
+  imgUrl.value = null
+}
+
 function handleBeforeUpload(file: any) {
   const isJPG = file.type === 'image/jpeg'
   const isLt2M = file.size / 1024 / 1024 < 2
@@ -75,28 +101,6 @@ function handleBeforeUpload(file: any) {
   }
   return true
 }
-
-/**
- * 自定义图片上传
- *
- * @param params
- */
-function uploadImage(params: any) {
-  const file = params.file
-  uploadFile(file).then(response => {
-    const imgURL = response.data
-    emit('update:modelValue', imgURL)
-  })
-}
-
-function handleExceed(file: any) {
-  ElMessage.warning('最多只能上传' + props.maxCount)
-}
-
-function handleRemove(imgURL: string) {
-  deleteFile(imgURL)
-  emit('update:modelValue', '')
-}
 </script>
 
 <style lang="scss">