导入优化

src/components/Upload/Images.vue

@@ -47,14 +47,9 @@
 <script setup lang="ts">
   import { computed, ref } from 'vue';
   import { generateUUID } from '@/utils/auth';
-  import type { UploadFileInfo } from 'naive-ui'
+  import type { UploadFileInfo } from 'naive-ui';
-  import {
+  import { PlusOutlined, EditOutlined, DeleteOutlined, ZoomInOutlined } from '@vicons/antd';
-    PlusOutlined,
+  import { useNotification } from 'naive-ui';
-    EditOutlined,
-    DeleteOutlined,
-    ZoomInOutlined,
-  } from '@vicons/antd';
-import { useNotification } from 'naive-ui'
 
   const uploadRef = ref();
   import { upload } from '@/api/common';
@@ -112,7 +107,7 @@ import { useNotification } from 'naive-ui'
   // 生成组件唯一id
   const uuid = ref('id-' + generateUUID());
 
-  const notification = useNotification()
+  const notification = useNotification();
 
   // 判断是否禁用上传和删除
   const self_disabled = computed(() => {
@@ -121,7 +116,7 @@ import { useNotification } from 'naive-ui'
 
   const fileList = computed({
     get: () => {
-    console.log(props.fileLists)
+      console.log(props.fileLists);
       return props.fileLists;
     },
     set: (val) => {
@@ -171,7 +166,7 @@ import { useNotification } from 'naive-ui'
       if (props.multiple) {
         emit('upload', fileList.value, props.zIndex);
       } else {
-        uploadRef.value!.clear();
+        uploadRef.value?.clear();
         emit('upload', '', props.zIndex);
       }
       options.onError(error as any);
@@ -181,7 +176,7 @@ import { useNotification } from 'naive-ui'
     }
   };
   const handleUploadChange = (data: { fileList: UploadFileInfo[] }) => {
-  handleHttpUpload(data)
+    handleHttpUpload(data);
   };
   const onPreview = (index: any) => {
     window.open(fileList.value[index].filePath);
@@ -201,7 +196,7 @@ const handleUploadChange= (data: { fileList: UploadFileInfo[] })=> {
         props.zIndex,
       );
     } else {
-      uploadRef.value!.clear();
+      uploadRef.value?.clear();
       emit('upload', '', props.zIndex);
     }
   };
@@ -221,7 +216,7 @@ const handleUploadChange= (data: { fileList: UploadFileInfo[] })=> {
    * @param rawFile 选择的文件
    * */
   const beforeUpload = (rawFile) => {
-    console.log(rawFile)
+    console.log(rawFile);
     const imgSize = rawFile.file.file.size / 1024 / 1024 < props.fileSize;
     if (!imgSize) {
       notification.warning({

src/components/Upload/file.vue

@@ -1,12 +1,29 @@
 <template>
   <div :class="isBtn ? 'file-upload-box2' : 'file-upload-box'">
-    <n-upload action="#" :id="uuid" class="upload-demo my-upload-file"
+    <n-upload
-      :class="fileList.length > 0 && !loading ? 'success-file' : ''" :multiple="multiple" ref="uploadRef" directory-dnd
+      action="#"
-      :disabled="loading ? true : self_disabled" v-model:file-list="fileList"
+      :id="uuid"
-      @change="handleUploadChange" @remove="handleRemove" @before-upload="beforeUpload" :show-file-list="showFileList"
+      class="upload-demo my-upload-file"
-      :max="limit" >
+      :class="fileList.length > 0 && !loading ? 'success-file' : ''"
+      :multiple="multiple"
+      ref="uploadRef"
+      directory-dnd
+      :disabled="loading ? true : self_disabled"
+      v-model:file-list="fileList"
+      @change="handleUploadChange"
+      @remove="handleRemove"
+      @before-upload="beforeUpload"
+      :show-file-list="showFileList"
+      :max="limit"
+    >
       <template v-if="isBtn">
-        <n-tooltip v-if="isBtn && btnTip" class="box-item" effect="dark" :content="btnTip" placement="top">
+        <n-tooltip
+          v-if="isBtn && btnTip"
+          class="box-item"
+          effect="dark"
+          :content="btnTip"
+          placement="top"
+        >
           <n-button icon="Upload" type="primary">点击上传</n-button>
         </n-tooltip>
         <n-button v-else icon="Upload" type="primary">点击上传</n-button>
@@ -45,8 +62,8 @@ import {
     DeleteOutlined,
     ZoomInOutlined,
   } from '@vicons/antd';
-import { useNotification } from 'naive-ui'
+  import { useNotification } from 'naive-ui';
-import type { UploadFileInfo } from 'naive-ui'
+  import type { UploadFileInfo } from 'naive-ui';
   import { generateUUID } from '@/utils/auth';
 
   const uploadRef = ref();
@@ -111,11 +128,11 @@ const props = defineProps({
   // 生成组件唯一id
   const uuid = ref('id-' + generateUUID());
 
-const delFlag= ref(false)
+  const delFlag = ref(false);
 
   const fileList = computed({
     get: () => {
-    props.fileLists.map(item=>item.status='finished')
+      props.fileLists.map((item) => (item.status = 'finished'));
       return props.fileLists;
     },
     set: (val) => {
@@ -123,7 +140,7 @@ const fileList = computed({
     },
   });
 
-const notification = useNotification()
+  const notification = useNotification();
 
   // 判断是否禁用上传和删除
   const self_disabled = computed(() => {
@@ -151,7 +168,7 @@ const handleHttpUpload = async (options) => {
           name: res.originalName,
           filePath: res.fileUrl,
           fileName: res.originalName,
-        status:'finished'
+          status: 'finished',
         });
         emit('upload', list, props.zIndex);
       } else {
@@ -166,7 +183,7 @@ const handleHttpUpload = async (options) => {
       if (props.multiple) {
         emit('upload', fileList.value, props.zIndex);
       } else {
-      uploadRef.value!.clear();
+        uploadRef.value?.clear();
         emit('upload', '', '', props.zIndex);
       }
       options.onError(error as any);
@@ -175,14 +192,14 @@ const handleHttpUpload = async (options) => {
     }
   };
   const handleUploadChange = (data: { fileList: UploadFileInfo[] }) => {
-  console.log(data)
+    console.log(data);
     if (!delFlag.value) {
-    handleHttpUpload(data)
+      handleHttpUpload(data);
     }
   };
 
   const handleRemove = (file: any) => {
-  delFlag.value = true
+    delFlag.value = true;
     if (props.multiple) {
       emit(
         'upload',
@@ -190,7 +207,7 @@ const handleRemove = (file: any) => {
         props.zIndex,
       );
     } else {
-    uploadRef.value!.clear();
+      uploadRef.value?.clear();
       emit('upload', '', '', props.zIndex);
     }
   };

src/views/system/level/userUpload.vue

@@ -1,14 +1,5 @@
 <template>
-  <n-modal
+  <n-modal v-model:show="props.visible" preset="dialog" style="width: 450px" @close="dialogClose">
-    v-model:show="props.visible"
-    preset="dialog"
-    style="width: 450px"
-    @close="dialogClose"
-    positive-text="确定"
-    negative-text="取消"
-    @positive-click="dialogSubmit"
-    @negative-click="dialogClose"
-  >
     <template #header>
       {{ dialogTitle }}
     </template>
@@ -17,7 +8,6 @@
       :headers="uploadHeaders"
       name="file"
       ref="uploadRef"
-      :default-upload="false"
       @change="handleChange"
       @before-upload="beforeUpload"
       v-model:file-list="fileList"
@@ -39,7 +29,7 @@
 
 <script lang="ts" setup>
   import { getTemplateByCode } from '@/api/system/user';
-  import { computed, reactive, ref } from 'vue';
+  import { computed, reactive, ref, nextTick } from 'vue';
   import { CloudUploadOutlined } from '@vicons/antd';
   import { useMessage } from 'naive-ui';
   import { useUserStore } from '@/store/modules/user';
@@ -100,18 +90,19 @@
    * 执行上传文件
    * @param param0 参数
    */
-  const handleChange = ({ file }) => {
+  const handleChange = async (file) => {
-    const status = file.status;
+    if (file.file.status === 'finished') {
-    if (status === 'done') {
+      let data = JSON.parse(file.event.target.response);
-      let data = file.response;
       if (data.code != 0) {
+        await nextTick();
+        fileList.value = [];
         message.error(data.msg || '导入失败');
       } else {
         message.success('导入成功');
         emit('update:visible', false);
         emit('success');
       }
-    } else if (status === 'error') {
+    } else if (file.file.status === 'error') {
       message.error('导入失败');
     }
   };

src/views/system/user/userUpload.vue

@@ -1,14 +1,5 @@
 <template>
-  <n-modal
+  <n-modal v-model:show="props.visible" preset="dialog" style="width: 450px" @close="dialogClose">
-    v-model:show="props.visible"
-    preset="dialog"
-    style="width: 450px"
-    @close="dialogClose"
-    positive-text="确定"
-    negative-text="取消"
-    @positive-click="dialogSubmit"
-    @negative-click="dialogClose"
-  >
     <template #header>
       {{ dialogTitle }}
     </template>
@@ -17,7 +8,6 @@
       :headers="uploadHeaders"
       name="file"
       ref="uploadRef"
-      :default-upload="false"
       @change="handleChange"
       @before-upload="beforeUpload"
       v-model:file-list="fileList"
@@ -40,7 +30,7 @@
 
 <script lang="ts" setup>
   import { getTemplateByCode } from '@/api/system/user';
-  import { computed, reactive, ref } from 'vue';
+  import { computed, reactive, ref, nextTick } from 'vue';
   import { CloudUploadOutlined } from '@vicons/antd';
   import { useMessage } from 'naive-ui';
   import { useUserStore } from '@/store/modules/user';
@@ -101,18 +91,19 @@
    * 执行上传文件
    * @param param0 参数
    */
-  const handleChange = ({ file }) => {
+  const handleChange = async (file) => {
-    const status = file.status;
+    if (file.file.status === 'finished') {
-    if (status === 'done') {
+      let data = JSON.parse(file.event.target.response);
-      let data = file.response;
       if (data.code != 0) {
+        await nextTick();
+        fileList.value = [];
         message.error(data.msg || '导入失败');
       } else {
         message.success('导入成功');
         emit('update:visible', false);
         emit('success');
       }
-    } else if (status === 'error') {
+    } else if (file.file.status === 'error') {
       message.error('导入失败');
     }
   };