限制上传并支持上传替换

src/views/system/user/component/AddUser.vue

@@ -11,11 +11,14 @@
         <el-upload
           ref="upload"
           class="upload-demo"
+          :multiple="false"
+          :limit="1"
           drag
           action="http://localhost:8092/api/user/import"
           :headers="headers"
           :with-credentials="true"
           :auto-upload="false"
+          :on-exceed="handleExceed"
           :before-upload="beforeUpload"
           :on-success="handleUploadSuccess"
           style="width: 384px; height: 192px; border-radius: 8px"
@@ -101,7 +104,12 @@
 <script setup lang="ts">
   import { Close, Document, CircleCheck, Warning } from '@element-plus/icons-vue';
   import { ref } from 'vue';
-  import type { UploadInstance } from 'element-plus';
+  import {
+    genFileId,
+    type UploadInstance,
+    type UploadProps,
+    type UploadRawFile,
+  } from 'element-plus';
   import { downloadByUrl } from '@/utils/file/download';
   import { useUserStore } from '@/store/modules/user';
   import { onMounted } from 'vue';
@@ -148,6 +156,14 @@
       target: '_self',
     });
   };
+
+  const handleExceed: UploadProps['onExceed'] = (files) => {
+    upload.value!.clearFiles();
+    const file = files[0] as UploadRawFile;
+    file.uid = genFileId();
+    upload.value!.handleStart(file);
+  };
+
   const handleImport = async () => {
     upload.value!.submit();
   };