fix(upload): 修复autoUpload属性上传问题 (#967)

* fix: fix code

* fix(upload): 修复auto-upload失效

* fix: 区分node环境

* fix: 解决图片预览问题

* fix: remove bu

* fix(Upload): resolved allowUploadDuplicateFile invalid when autoUpload is true

---------

Co-authored-by: anlyyao <anly_yaw@163.com>

src/image-viewer/image-viewer.vue

@@ -17,7 +17,7 @@
         :autoplay="false"
         :class="`${name}__content`"
         height="100vh"
-        :current="currentIndex"
+        :default-current="currentIndex"
         @change="onSwiperChange"
       >
         <t-swiper-item
@@ -43,11 +43,11 @@ import config from '../config';
 import ImagediverProps from './props';
 import { renderTNode, TNode, useDefault, useTouch } from '../shared';
 import { preventDefault } from '../shared/dom';
-import { TdImageViewerProps } from './type';
 
 // inner components
 import { Swiper as TSwiper, SwiperItem as TSwiperItem } from '../swiper';
 import TImage from '../image';
+import { TdImageViewerProps } from './type';
 
 const { prefix } = config;
 const name = `${prefix}-image-viewer`;
@@ -65,7 +65,7 @@ export default defineComponent({
     TImage,
   },
   props: ImagediverProps,
-  emits: ['close', 'index-change', 'update:visible', 'update:modelValue', 'delete'],
+  emits: ['close', 'index-change', 'update:visible', 'update:modelValue', 'update:index', 'delete'],
   setup(props, { emit }) {
     const internalInstance = getCurrentInstance();
     const state = reactive({
@@ -81,8 +81,6 @@ export default defineComponent({
       'index-change',
     );
     const touch = useTouch();
-
-    // node
     const closeNode = computed(() =>
       renderTNode(internalInstance, 'close-btn', {
         defaultNode: h(CloseIcon),

src/upload/__test__/__snapshots__/demo.test.jsx.snap

@@ -651,14 +651,10 @@ exports[`Upload > Upload mobileVue demo works fine 1`] = `
               </picture>
             </div>
             <div
-              bind:tap="onFileClick"
               class="t-upload__progress-mask"
-              data-file="{{file}}"
-              data-index="{{index}}"
             >
               
               <svg
-                aria-hidden=""
                 class="t-icon t-icon-loading t-upload__progress-loading"
                 fill="none"
                 height="1em"
@@ -740,14 +736,10 @@ exports[`Upload > Upload mobileVue demo works fine 1`] = `
               </picture>
             </div>
             <div
-              bind:tap="onFileClick"
               class="t-upload__progress-mask"
-              data-file="{{file}}"
-              data-index="{{index}}"
             >
               
               <svg
-                aria-hidden=""
                 class="t-icon t-icon-loading t-upload__progress-loading"
                 fill="none"
                 height="1em"
@@ -882,13 +874,9 @@ exports[`Upload > Upload mobileVue demo works fine 1`] = `
               </picture>
             </div>
             <div
-              bind:tap="onFileClick"
               class="t-upload__progress-mask"
-              data-file="{{file}}"
-              data-index="{{index}}"
             >
               <svg
-                aria-hidden=""
                 class="t-icon t-icon-close-circle"
                 fill="none"
                 height="1em"
@@ -1468,14 +1456,10 @@ exports[`Upload > Upload statusVue demo works fine 1`] = `
           </picture>
         </div>
         <div
-          bind:tap="onFileClick"
           class="t-upload__progress-mask"
-          data-file="{{file}}"
-          data-index="{{index}}"
         >
           
           <svg
-            aria-hidden=""
             class="t-icon t-icon-loading t-upload__progress-loading"
             fill="none"
             height="1em"
@@ -1557,14 +1541,10 @@ exports[`Upload > Upload statusVue demo works fine 1`] = `
           </picture>
         </div>
         <div
-          bind:tap="onFileClick"
           class="t-upload__progress-mask"
-          data-file="{{file}}"
-          data-index="{{index}}"
         >
           
           <svg
-            aria-hidden=""
             class="t-icon t-icon-loading t-upload__progress-loading"
             fill="none"
             height="1em"
@@ -1699,13 +1679,9 @@ exports[`Upload > Upload statusVue demo works fine 1`] = `
           </picture>
         </div>
         <div
-          bind:tap="onFileClick"
           class="t-upload__progress-mask"
-          data-file="{{file}}"
-          data-index="{{index}}"
         >
           <svg
-            aria-hidden=""
             class="t-icon t-icon-close-circle"
             fill="none"
             height="1em"

src/upload/upload.vue

@@ -1,30 +1,24 @@
 <template>
   <div :class="`${name}`">
-    <div v-for="(file, index) in uploadedFiles" :key="index" :class="`${name}__item`">
+    <div v-for="(file, index) in renderUploadFiles" :key="index" :class="`${name}__item`">
       <t-image
         :class="`${name}__image`"
         shape="round"
         v-bind="imageProps"
         :src="file.url"
-        @click="(e) => handlePreview(e, file)"
+        @click="(e) => handlePreview(e, file, index)"
       />
-      <div
-        v-if="file.status === 'fail' || file.status === 'progress'"
-        data-index="{{index}}"
-        :class="`${name}__progress-mask`"
-        data-file="{{file}}"
-        bind:tap="onFileClick"
-      >
+      <div v-if="file.status === 'fail' || file.status === 'progress'" :class="`${name}__progress-mask`">
         <template v-if="file.status === 'progress'">
-          <loading-icon :class="`${name}__progress-loading`" size="24" aria-hidden />
+          <loading-icon :class="`${name}__progress-loading`" size="24" />
           <div :class="`${name}__progress-text`">{{ file.percent ? file.percent + '%' : '上传中...' }}</div>
         </template>
-        <close-circle-icon v-else size="24" aria-hidden />
+        <close-circle-icon v-else size="24" />
         <div v-if="file.status === 'fail'" :class="`${name}__progress-text`">上传失败</div>
       </div>
       <close-icon :class="`${name}__delete-btn`" @click="({ e }) => handleRemove(e, file, index)" />
     </div>
-    <template v-if="max === 0 || (max > 0 && uploadedFiles?.length < max)">
+    <template v-if="max === 0 || (max > 0 && renderUploadFiles?.length < max)">
       <div v-if="defaultContent" @click="triggerUpload">
         <t-node :content="defaultContent" />
       </div>
@@ -45,7 +39,7 @@
       :accept="accept"
       @change="handleChange"
     />
-    <t-image-viewer v-model:images="images" v-model="showViewer" :default-index="initialIndex" />
+    <t-image-viewer v-model:images="renderImages" v-model="showViewer" :index="initialIndex" />
   </div>
 </template>
 <script lang="ts">
@@ -118,6 +112,27 @@ export default defineComponent({
       }
       return [];
     });
+
+    const renderUploadFiles = computed((): UploadFile[] => {
+      if (props.autoUpload) {
+        return uploadedFiles.value;
+      }
+      return uploadedFiles.value.concat(toUploadFiles.value).map((file) => {
+        return {
+          ...file,
+          status: 'success',
+        };
+      });
+    });
+
+    const renderImages = computed(() => {
+      if (innerFiles.value) {
+        const imgs = innerFiles.value.map((item) => item.url as string);
+        return imgs.concat(images.value);
+      }
+      return images.value;
+    });
+
     const inputRef = ref<null | HTMLInputElement>(null);
 
     const triggerUpload = () => {
@@ -126,7 +141,8 @@ export default defineComponent({
       input.click();
     };
 
-    const handlePreview = (e: MouseEvent, file: UploadFile) => {
+    const handlePreview = (e: MouseEvent, file: UploadFile, index: number) => {
+      initialIndex.value = index;
       showViewer.value = true;
       emit('preview', {
         e,
@@ -215,20 +231,25 @@ export default defineComponent({
           percent: 0,
           status: 'waiting',
         };
-        const reader = new FileReader();
-        reader.readAsDataURL(fileRaw);
-        reader.onload = (event: ProgressEvent<FileReader>) => {
-          uploadFile.url = event.target?.result as string;
-        };
+        // node 环境不支持 URL.createObjectURL, 保证测试用例通过
+        if (!(typeof process !== 'undefined' && process.release.name === 'node')) {
+          uploadFile.url = URL.createObjectURL(fileRaw);
+          if (!props.autoUpload) {
+            images.value.push(uploadFile.url as string);
+          }
+        }
         handleBeforeUpload(fileRaw).then((canUpload) => {
           if (!canUpload) return;
           const newFiles: Array<UploadFile> = toUploadFiles.value.concat();
 
           // 判断是否为重复文件条件，已选是否存在检验
+          let isDuplicated = false;
           if (props.allowUploadDuplicateFile) {
             newFiles.push(uploadFile);
           } else {
-            const isDuplicated = toUploadFiles.value.some((file) => file.name === uploadFile.name);
+            isDuplicated = [...uploadedFiles.value, ...toUploadFiles.value].some(
+              (file) => file.name === uploadFile.name,
+            );
             if (isDuplicated) {
               props.onValidate?.({
                 type: 'FILTER_FILE_SAME_NAME',
@@ -239,7 +260,7 @@ export default defineComponent({
             }
           }
           toUploadFiles.value = newFiles;
-          if (props.autoUpload) {
+          if ((props.allowUploadDuplicateFile || !isDuplicated) && props.autoUpload) {
             upload(uploadFile);
           }
         });
@@ -276,11 +297,22 @@ export default defineComponent({
     };
 
     const handleRemove = (e: MouseEvent, file: UploadFile, index: number) => {
-      const files = uploadedFiles.value.concat();
-      files.splice(index, 1);
-      setInnerFiles(files, { e, trigger: 'remove', index, file });
-      emit('remove', { e, index, file });
+      if (props.autoUpload) {
+        const files = uploadedFiles.value.concat();
+        files.splice(index, 1);
+        setInnerFiles(files, { e, trigger: 'remove', index, file });
+      } else {
+        const findIndex = toUploadFiles.value.findIndex((item) => item.fileRaw === file.fileRaw);
+        if (findIndex !== -1) {
+          toUploadFiles.value.splice(findIndex, 1);
+        } else {
+          const files = uploadedFiles.value.concat();
+          files.splice(index, 1);
+          setInnerFiles(files, { e, trigger: 'remove', index, file });
+        }
+      }
       images.value.splice(index, 1);
+      emit('remove', { e, index, file });
     };
 
     const upload = async (file: UploadFile): Promise<void> => {
@@ -434,6 +466,8 @@ export default defineComponent({
       handleBeforeUpload,
       handleSizeLimit,
       uploadFiles,
+      renderUploadFiles,
+      renderImages,
       handleMockProgress,
       handleProgress,
       handleRemove,