From 994eb75bbf61e83631ec2a402ce12bcc76bf4e8e Mon Sep 17 00:00:00 2001
From: chaishi <974383157@qq.com>
Date: Sun, 5 Nov 2023 15:37:21 +0800
Subject: [PATCH 01/11] feat(image-viewer): support closeOnEscKeydown

---
 src/image-viewer/image-viewer.en-US.md | 10 ++++++----
 src/image-viewer/image-viewer.md       |  8 +++++---
 src/image-viewer/image-viewer.tsx      |  4 +++-
 src/image-viewer/props.ts              |  6 ++++++
 src/image-viewer/type.ts               |  9 ++++++++-
 5 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/image-viewer/image-viewer.en-US.md b/src/image-viewer/image-viewer.en-US.md
index 83520e7f4d..a507da3a27 100644
--- a/src/image-viewer/image-viewer.en-US.md
+++ b/src/image-viewer/image-viewer.en-US.md
@@ -6,19 +6,21 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+closeOnEscKeydown | Boolean | true | trigger image viewer close event on `ESC` keydown | N
 closeOnOverlay | Boolean | - | \- | N
 draggable | Boolean | undefined | \- | N
 imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 images | Array | [] | Typescript：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
-index | Number | - | `v-model:index` is supported | N
-defaultIndex | Number | - | uncontrolled property | N
+index | Number | 0 | `v-model:index` is supported | N
+defaultIndex | Number | 0 | uncontrolled property | N
 mode | String | modal | options: modal/modeless | N
 navigationArrow | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 showOverlay | Boolean | undefined | \- | N
 title | String / Slot / Function | - | preview title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-trigger | String / Slot / Function | - | trigger element。Typescript：`string \| TNode<{ open: () => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+trigger | String / Slot / Function | - | trigger element。Typescript：`TNode \| TNode<{ open: () => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 viewerScale | Object | - | Typescript：`ImageViewerScale` `interface ImageViewerScale { minWidth: number; minHeight: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
-visible | Boolean | false | `v-model` and `v-model:visible` is supported | N
+visible | Boolean | false | hide or show image viewer。`v-model` and `v-model:visible` is supported | N
+defaultVisible | Boolean | false | hide or show image viewer。uncontrolled property | N
 zIndex | Number | - | \- | N
 onClose | Function |  | Typescript：`(context: { trigger: 'close-btn' \| 'overlay' \| 'esc'; e: MouseEvent \| KeyboardEvent }) => void`<br/> | N
 onIndexChange | Function |  | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`<br/> | N
diff --git a/src/image-viewer/image-viewer.md b/src/image-viewer/image-viewer.md
index d5a79f7007..2b38657dde 100644
--- a/src/image-viewer/image-viewer.md
+++ b/src/image-viewer/image-viewer.md
@@ -34,19 +34,21 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N
 closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N
 draggable | Boolean | undefined | 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 | N
 imageScale | Object | - |  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 images | Array | [] | 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]`。TS 类型：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
-index | Number | - | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N
-defaultIndex | Number | - | 当前预览图片所在的下标。非受控属性 | N
+index | Number | 0 | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N
+defaultIndex | Number | 0 | 当前预览图片所在的下标。非受控属性 | N
 mode | String | modal | 模态预览（modal）和非模态预览（modeless)。可选项：modal/modeless | N
 navigationArrow | Boolean / Slot / Function | true | 切换预览图片的左图标，可自定义。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 showOverlay | Boolean | undefined | 是否显示遮罩层。`mode=modal` 时，默认显示；`mode=modeless` 时，默认不显示 | N
 title | String / Slot / Function | - | 预览标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义。TS 类型：`string \| TNode<{ open: () => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义。TS 类型：`TNode \| TNode<{ open: () => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 viewerScale | Object | - | 限制预览器缩放的最小宽度和最小高度，仅 `mode=modeless` 时有效。TS 类型：`ImageViewerScale` `interface ImageViewerScale { minWidth: number; minHeight: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible` | N
+defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N
 zIndex | Number | - | 层级，默认为 2000 | N
 onClose | Function |  | TS 类型：`(context: { trigger: 'close-btn' \| 'overlay' \| 'esc'; e: MouseEvent \| KeyboardEvent }) => void`<br/>关闭时触发，事件参数包含触发关闭的来源：关闭按钮、遮罩层、ESC 键 | N
 onIndexChange | Function |  | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`<br/>预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N
diff --git a/src/image-viewer/image-viewer.tsx b/src/image-viewer/image-viewer.tsx
index 9282cdaa8c..b81077f1f7 100644
--- a/src/image-viewer/image-viewer.tsx
+++ b/src/image-viewer/image-viewer.tsx
@@ -110,7 +110,9 @@ export default defineComponent({
           onZoomOut();
           break;
         case EVENT_CODE.esc:
-          onClose({ e, trigger: 'esc' });
+          if (props.closeOnEscKeydown) {
+            onClose({ e, trigger: 'esc' });
+          }
           break;
         default:
           break;
diff --git a/src/image-viewer/props.ts b/src/image-viewer/props.ts
index 3106a53295..c736635386 100644
--- a/src/image-viewer/props.ts
+++ b/src/image-viewer/props.ts
@@ -13,6 +13,11 @@ export default {
     type: [Boolean, Function] as PropType<TdImageViewerProps['closeBtn']>,
     default: true as TdImageViewerProps['closeBtn'],
   },
+  /** 按下 ESC 时是否触发图片预览器关闭事件 */
+  closeOnEscKeydown: {
+    type: Boolean,
+    default: true,
+  },
   /** 是否在点击遮罩层时，触发预览关闭 */
   closeOnOverlay: Boolean,
   /** 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 */
@@ -37,6 +42,7 @@ export default {
   /** 当前预览图片所在的下标，非受控属性 */
   defaultIndex: {
     type: Number,
+    default: 0,
   },
   /** 模态预览（modal）和非模态预览（modeless) */
   mode: {
diff --git a/src/image-viewer/type.ts b/src/image-viewer/type.ts
index fc43edd45b..8b65c81d56 100644
--- a/src/image-viewer/type.ts
+++ b/src/image-viewer/type.ts
@@ -12,6 +12,11 @@ export interface TdImageViewerProps {
    * @default true
    */
   closeBtn?: boolean | TNode;
+  /**
+   * 按下 ESC 时是否触发图片预览器关闭事件
+   * @default true
+   */
+  closeOnEscKeydown?: boolean;
   /**
    * 是否在点击遮罩层时，触发预览关闭
    */
@@ -31,10 +36,12 @@ export interface TdImageViewerProps {
   images?: Array<string | File | ImageInfo>;
   /**
    * 当前预览图片所在的下标
+   * @default 0
    */
   index?: number;
   /**
    * 当前预览图片所在的下标，非受控属性
+   * @default 0
    */
   defaultIndex?: number;
   /**
@@ -58,7 +65,7 @@ export interface TdImageViewerProps {
   /**
    * 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义
    */
-  trigger?: string | TNode<{ open: () => void }>;
+  trigger?: TNode | TNode<{ open: () => void }>;
   /**
    * 限制预览器缩放的最小宽度和最小高度，仅 `mode=modeless` 时有效
    */

From fa4d8197a2af8db3a188be25f865638c6e795034 Mon Sep 17 00:00:00 2001
From: chaishi <974383157@qq.com>
Date: Sun, 5 Nov 2023 15:49:58 +0800
Subject: [PATCH 02/11] feat(Upload): support imageViewerProps

---
 src/upload/_example/image.vue            | 3 +++
 src/upload/constants.ts                  | 1 +
 src/upload/interface.ts                  | 2 ++
 src/upload/props.ts                      | 4 ++++
 src/upload/themes/dragger-file.tsx       | 3 ++-
 src/upload/themes/image-card.tsx         | 3 ++-
 src/upload/themes/multiple-flow-list.tsx | 3 ++-
 src/upload/type.ts                       | 5 +++++
 src/upload/upload.en-US.md               | 1 +
 src/upload/upload.md                     | 1 +
 src/upload/upload.tsx                    | 1 +
 11 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/upload/_example/image.vue b/src/upload/_example/image.vue
index a3502816fb..fc6822e357 100644
--- a/src/upload/_example/image.vue
+++ b/src/upload/_example/image.vue
@@ -21,6 +21,7 @@
       <t-upload
         ref="uploadRef1"
         v-model="file1"
+        :image-viewer-props="imageViewerProps"
         action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
         theme="image"
         tips="单张图片文件上传（上传成功状态演示）"
@@ -98,6 +99,8 @@ const uploadRef1 = ref();
 const uploadRef2 = ref();
 const uploadRef3 = ref();
 
+const imageViewerProps = ref({ closeOnEscKeydown: false });
+
 const handleFail = ({ file }) => {
   MessagePlugin.error(`文件 ${file.name} 上传失败`);
 };
diff --git a/src/upload/constants.ts b/src/upload/constants.ts
index 0e229e93d4..1a242d0434 100644
--- a/src/upload/constants.ts
+++ b/src/upload/constants.ts
@@ -26,4 +26,5 @@ export const commonProps = {
   default: Function as PropType<CommonDisplayFileProps['default']>,
   fileListDisplay: Function as PropType<CommonDisplayFileProps['fileListDisplay']>,
   onRemove: Function as PropType<CommonDisplayFileProps['onRemove']>,
+  imageViewerProps: Object as PropType<CommonDisplayFileProps['imageViewerProps']>,
 };
diff --git a/src/upload/interface.ts b/src/upload/interface.ts
index 41051fedb2..81bf2231d1 100644
--- a/src/upload/interface.ts
+++ b/src/upload/interface.ts
@@ -1,6 +1,7 @@
 import { TdUploadProps, UploadRemoveContext } from './type';
 import { GlobalConfigProvider } from '../config-provider/type';
 import { TNode } from '../common';
+import { ImageViewerProps } from '../image-viewer';
 
 export interface CommonDisplayFileProps {
   files: TdUploadProps['files'];
@@ -26,6 +27,7 @@ export interface CommonDisplayFileProps {
   fileListDisplay?: TdUploadProps['fileListDisplay'];
   onRemove?: (p: UploadRemoveContext) => void;
   onPasteFileChange?: (payload: ClipboardEvent) => void;
+  imageViewerProps?: ImageViewerProps;
 }
 
 export type UploadProps = TdUploadProps;
diff --git a/src/upload/props.ts b/src/upload/props.ts
index 412b51a04e..a4b3846ed5 100644
--- a/src/upload/props.ts
+++ b/src/upload/props.ts
@@ -86,6 +86,10 @@ export default {
   headers: {
     type: Object as PropType<TdUploadProps['headers']>,
   },
+  /** 透传图片预览组件全部属性 */
+  imageViewerProps: {
+    type: Object as PropType<TdUploadProps['imageViewerProps']>,
+  },
   /** 用于添加属性到 HTML 元素 `input` */
   inputAttributes: {
     type: Object as PropType<TdUploadProps['inputAttributes']>,
diff --git a/src/upload/themes/dragger-file.tsx b/src/upload/themes/dragger-file.tsx
index 650249ad07..e43168e098 100644
--- a/src/upload/themes/dragger-file.tsx
+++ b/src/upload/themes/dragger-file.tsx
@@ -12,7 +12,7 @@ import useCommonClassName from '../../hooks/useCommonClassName';
 import TLoading from '../../loading';
 import useDrag, { UploadDragEvents } from '../hooks/useDrag';
 import useGlobalIcon from '../../hooks/useGlobalIcon';
-import ImageViewer from '../../image-viewer';
+import ImageViewer, { ImageViewerProps } from '../../image-viewer';
 import { useTNodeJSX } from '../../hooks';
 import { UploadConfig } from '../../config-provider';
 import Image from '../../image';
@@ -72,6 +72,7 @@ export default defineComponent({
           <ImageViewer
             images={[url]}
             trigger={(h, { open }: any) => <Image src={url || file.raw} onClick={open} error="" loading="" />}
+            {...(props.imageViewerProps as ImageViewerProps)}
           ></ImageViewer>
         </div>
       );
diff --git a/src/upload/themes/image-card.tsx b/src/upload/themes/image-card.tsx
index 54c02ee0f9..bcae2527a5 100644
--- a/src/upload/themes/image-card.tsx
+++ b/src/upload/themes/image-card.tsx
@@ -7,7 +7,7 @@ import {
 } from 'tdesign-icons-vue-next';
 import Loading from '../../loading';
 import useGlobalIcon from '../../hooks/useGlobalIcon';
-import ImageViewer from '../../image-viewer';
+import ImageViewer, { ImageViewerProps } from '../../image-viewer';
 import { CommonDisplayFileProps } from '../interface';
 import { commonProps } from '../constants';
 import { TdUploadProps, UploadFile } from '../type';
@@ -81,6 +81,7 @@ export default defineComponent({
                     />
                   );
                 }}
+                {...(props.imageViewerProps as ImageViewerProps)}
               ></ImageViewer>
             </span>
             {!props.disabled && (
diff --git a/src/upload/themes/multiple-flow-list.tsx b/src/upload/themes/multiple-flow-list.tsx
index f1ef54c605..503c1d38e3 100644
--- a/src/upload/themes/multiple-flow-list.tsx
+++ b/src/upload/themes/multiple-flow-list.tsx
@@ -13,7 +13,7 @@ import {
   VideoIcon,
 } from 'tdesign-icons-vue-next';
 import useGlobalIcon from '../../hooks/useGlobalIcon';
-import ImageViewer from '../../image-viewer';
+import ImageViewer, { ImageViewerProps } from '../../image-viewer';
 import { CommonDisplayFileProps } from '../interface';
 import { commonProps } from '../constants';
 import TButton from '../../button';
@@ -395,6 +395,7 @@ export default defineComponent({
             }}
             index={previewIndex.value}
             onIndexChange={(val) => (previewIndex.value = val)}
+            {...(props.imageViewerProps as ImageViewerProps)}
           ></ImageViewer>
         </div>
       );
diff --git a/src/upload/type.ts b/src/upload/type.ts
index f8dc08ad57..9465500c7c 100644
--- a/src/upload/type.ts
+++ b/src/upload/type.ts
@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { ImageViewerProps } from '../image-viewer';
 import { UploadConfig } from '../config-provider/type';
 import { ButtonProps } from '../button';
 import { PlainObject, TNode, UploadDisplayDragEvents } from '../common';
@@ -91,6 +92,10 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
    * 设置上传的请求头部，`action` 存在时有效
    */
   headers?: { [key: string]: string };
+  /**
+   * 透传图片预览组件全部属性
+   */
+  imageViewerProps?: ImageViewerProps;
   /**
    * 用于添加属性到 HTML 元素 `input`
    */
diff --git a/src/upload/upload.en-US.md b/src/upload/upload.en-US.md
index dfe7ff20cd..15345f7f06 100644
--- a/src/upload/upload.en-US.md
+++ b/src/upload/upload.en-US.md
@@ -24,6 +24,7 @@ format | Function | - | to redefine  `UploadFile` data structure。Typescript：
 formatRequest | Function | - | redefine request data。Typescript：`(requestData: { [key: string]: any }) => { [key: string]: any }` | N
 formatResponse | Function | - | redefine response data structure。Typescript：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string } & Record<string, any>` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
 headers | Object | - | HTTP Request Header。Typescript：`{[key: string]: string}` | N
+imageViewerProps | Object | - | ImageViewer Component Props。Typescript：`ImageViewerProps`，[ImageViewer API Documents](./image-viewer?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
 inputAttributes | Object | - | add attributes to HTML element `input`。Typescript：`CSSProperties` | N
 isBatchUpload | Boolean | false | make all files to be a whole package, files can only be replaced or deleted together, can not add more files | N
 locale | Object | - | upload language config, priority of `locale` is higher than global language config。Typescript：`UploadConfig` `import { UploadConfig } from '../config-provider/type'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
diff --git a/src/upload/upload.md b/src/upload/upload.md
index 4ee8cde7f8..5be479db95 100644
--- a/src/upload/upload.md
+++ b/src/upload/upload.md
@@ -24,6 +24,7 @@ format | Function | - | 转换文件 `UploadFile` 的数据结构，可新增或
 formatRequest | Function | - | 用于新增或修改文件上传请求 参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`。<br/>一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。<br/>⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。<br/>可以使用 `name` 定义 `file` 字段的别名。<br/>也可以使用 `formatRequest` 自定义任意字段，如添加一个字段 `fileList` ，存储文件数组。TS 类型：`(requestData: { [key: string]: any }) => { [key: string]: any }` | N
 formatResponse | Function | - | 用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。<br/> 此函数的返回值 `error` 或 `response.error` 会作为错误文本提醒，如果存在会判定为本次上传失败。<br/> 此函数的返回值 `url` 或 `response.url` 会作为上传成功后的链接。TS 类型：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string } & Record<string, any>` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
 headers | Object | - | 设置上传的请求头部，`action` 存在时有效。TS 类型：`{[key: string]: string}` | N
+imageViewerProps | Object | - | 透传图片预览组件全部属性。TS 类型：`ImageViewerProps`，[ImageViewer API Documents](./image-viewer?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
 inputAttributes | Object | - | 用于添加属性到 HTML 元素 `input`。TS 类型：`CSSProperties` | N
 isBatchUpload | Boolean | false | 多个文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件。`theme=file-flow` 时有效 | N
 locale | Object | - | 上传组件文本语言配置，支持自定义配置组件中的全部文本。优先级高于全局配置中语言。TS 类型：`UploadConfig` `import { UploadConfig } from '../config-provider/type'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx
index 3a27175db8..019ecadd19 100644
--- a/src/upload/upload.tsx
+++ b/src/upload/upload.tsx
@@ -100,6 +100,7 @@ export default defineComponent({
       onRemove: onInnerRemove,
       uploadPastedFiles: props.uploadPastedFiles,
       onPasteFileChange: onPasteFileChange,
+      imageViewerProps: props.imageViewerProps,
     }));
 
     const dragProps: UploadDragEvents = {

From 941d8ebf8169102fb7053845d89c1888a186b322 Mon Sep 17 00:00:00 2001
From: chaishi <974383157@qq.com>
Date: Sun, 5 Nov 2023 16:05:49 +0800
Subject: [PATCH 03/11] feat(upload): image Upload support size limit tips

---
 src/upload/_example/image.vue     | 6 +++++-
 src/upload/themes/image-card.tsx  | 1 +
 src/upload/themes/normal-file.tsx | 2 --
 src/upload/upload.tsx             | 2 ++
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/upload/_example/image.vue b/src/upload/_example/image.vue
index fc6822e357..17f4376126 100644
--- a/src/upload/_example/image.vue
+++ b/src/upload/_example/image.vue
@@ -22,6 +22,7 @@
         ref="uploadRef1"
         v-model="file1"
         :image-viewer-props="imageViewerProps"
+        :size-limit="sizeLimit"
         action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
         theme="image"
         tips="单张图片文件上传（上传成功状态演示）"
@@ -73,7 +74,8 @@
       theme="image"
       tips="允许选择多张图片文件上传，最多只能上传 3 张图片"
       accept="image/*"
-      :abridge-name="[6, 6]"
+      :size-limit="sizeLimit"
+      :abridge-name="abridgeName"
       :disabled="disabled"
       :auto-upload="autoUpload"
       :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
@@ -100,6 +102,8 @@ const uploadRef2 = ref();
 const uploadRef3 = ref();
 
 const imageViewerProps = ref({ closeOnEscKeydown: false });
+const sizeLimit = ref({ size: 500, unit: 'KB' });
+const abridgeName = [6, 6];
 
 const handleFail = ({ file }) => {
   MessagePlugin.error(`文件 ${file.name} 上传失败`);
diff --git a/src/upload/themes/image-card.tsx b/src/upload/themes/image-card.tsx
index bcae2527a5..a94e1d5a34 100644
--- a/src/upload/themes/image-card.tsx
+++ b/src/upload/themes/image-card.tsx
@@ -128,6 +128,7 @@ export default defineComponent({
       const customList = renderTNodeJSX('fileListDisplay', {
         params: {
           files: displayFiles.value,
+          ...props,
         },
       });
       if (customList) return customList;
diff --git a/src/upload/themes/normal-file.tsx b/src/upload/themes/normal-file.tsx
index 467e36d39e..c1ee4d879d 100644
--- a/src/upload/themes/normal-file.tsx
+++ b/src/upload/themes/normal-file.tsx
@@ -153,8 +153,6 @@ const NormalFile = defineComponent({
 
           {fileListDisplay || renderFilePreviewAsText(displayFiles)}
 
-          {props.sizeOverLimitMessage && <small class={props.errorClasses}>{props.sizeOverLimitMessage}</small>}
-
           {/* 单文件上传失败要显示失败的原因 */}
           {!props.multiple && displayFiles[0]?.status === 'fail' && theme.value === 'file' ? (
             <small class={[props.errorClasses, props.placeholderClass]}>
diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx
index 019ecadd19..5fe0bf9302 100644
--- a/src/upload/upload.tsx
+++ b/src/upload/upload.tsx
@@ -221,6 +221,8 @@ export default defineComponent({
             {renderTNodeJSX('tips')}
           </small>
         )}
+
+        {sizeOverLimitMessage.value && <small class={errorClasses}>{sizeOverLimitMessage.value}</small>}
       </div>
     );
   },

From 3cf85280ef3b651ddb9de9143fa8d553a584a649 Mon Sep 17 00:00:00 2001
From: chaishi <974383157@qq.com>
Date: Sun, 5 Nov 2023 16:12:45 +0800
Subject: [PATCH 04/11] docs(upload): add docs explanation

---
 src/upload/props.ts  | 2 +-
 src/upload/type.ts   | 2 +-
 src/upload/upload.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/upload/props.ts b/src/upload/props.ts
index a4b3846ed5..0d5f3a2192 100644
--- a/src/upload/props.ts
+++ b/src/upload/props.ts
@@ -100,7 +100,7 @@ export default {
   locale: {
     type: Object as PropType<TdUploadProps['locale']>,
   },
-  /** 用于控制文件上传数量，值为 0 则不限制 */
+  /** 用于控制文件上传数量，值为 0 则不限制。注意，单文件上传场景，请勿设置 `max` 属性 */
   max: {
     type: Number,
     default: 0,
diff --git a/src/upload/type.ts b/src/upload/type.ts
index 9465500c7c..3e962a9b6b 100644
--- a/src/upload/type.ts
+++ b/src/upload/type.ts
@@ -110,7 +110,7 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
    */
   locale?: UploadConfig;
   /**
-   * 用于控制文件上传数量，值为 0 则不限制
+   * 用于控制文件上传数量，值为 0 则不限制。注意，单文件上传场景，请勿设置 `max` 属性
    * @default 0
    */
   max?: number;
diff --git a/src/upload/upload.md b/src/upload/upload.md
index 5be479db95..bcaa427fb6 100644
--- a/src/upload/upload.md
+++ b/src/upload/upload.md
@@ -28,7 +28,7 @@ imageViewerProps | Object | - | 透传图片预览组件全部属性。TS 类型
 inputAttributes | Object | - | 用于添加属性到 HTML 元素 `input`。TS 类型：`CSSProperties` | N
 isBatchUpload | Boolean | false | 多个文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件。`theme=file-flow` 时有效 | N
 locale | Object | - | 上传组件文本语言配置，支持自定义配置组件中的全部文本。优先级高于全局配置中语言。TS 类型：`UploadConfig` `import { UploadConfig } from '../config-provider/type'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
-max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N
+max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制。注意，单文件上传场景，请勿设置 `max` 属性 | N
 method | String | POST | HTTP 请求类型。可选项：POST/GET/PUT/OPTION/PATCH/post/get/put/option/patch | N
 mockProgressDuration | Number | - | 模拟进度间隔时间，单位：毫秒，默认：300。由于原始的上传请求，小文件上传进度只有 0 和 100，故而新增模拟进度，每间隔 `mockProgressDuration` 毫秒刷新一次模拟进度。小文件设置小一点，大文件设置大一点。注意：当 `useMockProgress` 为真时，当前设置有效 | N
 multiple | Boolean | false | 支持多文件上传 | N

From c9ba8afa64d84e9a53b70e997861638b6c9b2a4c Mon Sep 17 00:00:00 2001
From: chaishi <974383157@qq.com>
Date: Sun, 5 Nov 2023 16:18:47 +0800
Subject: [PATCH 05/11] fix(upload): max=1 and multiple=false

---
 src/upload/hooks/useUpload.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/upload/hooks/useUpload.ts b/src/upload/hooks/useUpload.ts
index 6abffa688b..5a1836883a 100644
--- a/src/upload/hooks/useUpload.ts
+++ b/src/upload/hooks/useUpload.ts
@@ -147,7 +147,7 @@ export default function useUpload(props: TdUploadProps) {
       // @ts-ignore
       files: [...files],
       allowUploadDuplicateFile: props.allowUploadDuplicateFile,
-      max: props.max,
+      max: props.multiple ? props.max : 0,
       sizeLimit: props.sizeLimit,
       isBatchUpload: isBatchUpload.value,
       autoUpload: autoUpload.value,

From 68e5517cdfc55c7e064abd2fb83ad829f607d267 Mon Sep 17 00:00:00 2001
From: chaishi <974383157@qq.com>
Date: Sun, 5 Nov 2023 16:37:56 +0800
Subject: [PATCH 06/11] feat(upload): add more params to fileListDisplay

---
 .../__snapshots__/vitest-upload.test.jsx.snap          |  7 +++++++
 src/upload/themes/image-card.tsx                       |  9 ++++++++-
 src/upload/themes/multiple-flow-list.tsx               |  8 ++++++++
 src/upload/themes/normal-file.tsx                      | 10 +++++++++-
 src/upload/upload.tsx                                  |  1 -
 5 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap b/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap
index 2dbf2f442a..ee13165e80 100644
--- a/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap
+++ b/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap
@@ -159,6 +159,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, fail
   <!---->
   <!---->
   <!---->
+  
 </div>
 `;
 
@@ -326,6 +327,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, progr
   <!---->
   <!---->
   <!---->
+  
 </div>
 `;
 
@@ -488,6 +490,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, succe
   <!---->
   <!---->
   <!---->
+  
 </div>
 `;
 
@@ -650,6 +653,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, succe
   <!---->
   <!---->
   <!---->
+  
 </div>
 `;
 
@@ -783,6 +787,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, waiti
   <!---->
   <!---->
   <!---->
+  
 </div>
 `;
 
@@ -1084,6 +1089,7 @@ exports[`Upload Component > props.theme: theme=file-flow works fine 1`] = `
   </div>
   <!---->
   <!---->
+  
 </div>
 `;
 
@@ -1621,5 +1627,6 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
   </div>
   <!---->
   <!---->
+  
 </div>
 `;
diff --git a/src/upload/themes/image-card.tsx b/src/upload/themes/image-card.tsx
index a94e1d5a34..69675ece6d 100644
--- a/src/upload/themes/image-card.tsx
+++ b/src/upload/themes/image-card.tsx
@@ -127,8 +127,15 @@ export default defineComponent({
       // render custom UI with fileListDisplay
       const customList = renderTNodeJSX('fileListDisplay', {
         params: {
+          triggerUpload: props.triggerUpload,
+          uploadFiles: props.uploadFiles,
+          cancelUpload: props.cancelUpload,
+          onPreview: props.onPreview,
+          onRemove: props.onRemove,
+          toUploadFiles: props.toUploadFiles,
+          sizeOverLimitMessage: props.sizeOverLimitMessage,
+          locale: props.locale,
           files: displayFiles.value,
-          ...props,
         },
       });
       if (customList) return customList;
diff --git a/src/upload/themes/multiple-flow-list.tsx b/src/upload/themes/multiple-flow-list.tsx
index 503c1d38e3..237bc88359 100644
--- a/src/upload/themes/multiple-flow-list.tsx
+++ b/src/upload/themes/multiple-flow-list.tsx
@@ -264,6 +264,13 @@ export default defineComponent({
     const renderFileList = () => {
       const customList = renderTNodeJSX('fileListDisplay', {
         params: {
+          cancelUpload: props.cancelUpload,
+          uploadFiles: props.uploadFiles,
+          onPreview: props.onPreview,
+          onRemove: props.onRemove,
+          toUploadFiles: props.toUploadFiles,
+          sizeOverLimitMessage: props.sizeOverLimitMessage,
+          locale: props.locale,
           files: props.displayFiles,
           dragEvents: innerDragEvents.value,
         },
@@ -327,6 +334,7 @@ export default defineComponent({
     const renderImageList = () => {
       const customList = renderTNodeJSX('fileListDisplay', {
         params: {
+          ...props,
           files: props.displayFiles,
           dragEvents: innerDragEvents.value,
         },
diff --git a/src/upload/themes/normal-file.tsx b/src/upload/themes/normal-file.tsx
index c1ee4d879d..9238c76d13 100644
--- a/src/upload/themes/normal-file.tsx
+++ b/src/upload/themes/normal-file.tsx
@@ -138,7 +138,15 @@ const NormalFile = defineComponent({
 
     return () => {
       const classes = [`${uploadPrefix}__single`, `${uploadPrefix}__single-${theme.value}`];
-      const fileListDisplay = renderTNodeJSX('fileListDisplay', { params: { files: props.displayFiles } });
+      const fileListDisplay = renderTNodeJSX('fileListDisplay', {
+        params: {
+          onRemove: props.onRemove,
+          toUploadFiles: props.toUploadFiles,
+          sizeOverLimitMessage: props.sizeOverLimitMessage,
+          locale: props.locale,
+          files: props.displayFiles,
+        },
+      });
       const { displayFiles } = props;
 
       return (
diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx
index 5fe0bf9302..f56dc30e25 100644
--- a/src/upload/upload.tsx
+++ b/src/upload/upload.tsx
@@ -221,7 +221,6 @@ export default defineComponent({
             {renderTNodeJSX('tips')}
           </small>
         )}
-
         {sizeOverLimitMessage.value && <small class={errorClasses}>{sizeOverLimitMessage.value}</small>}
       </div>
     );

From ded07964ffb155ba6a034d71928b5ad8f1802b27 Mon Sep 17 00:00:00 2001
From: chaishi <974383157@qq.com>
Date: Sun, 5 Nov 2023 17:03:43 +0800
Subject: [PATCH 07/11] test: update snapshots

---
 test/unit/snap/__snapshots__/csr.test.js.snap | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/test/unit/snap/__snapshots__/csr.test.js.snap b/test/unit/snap/__snapshots__/csr.test.js.snap
index 3659806745..c19f091bd3 100644
--- a/test/unit/snap/__snapshots__/csr.test.js.snap
+++ b/test/unit/snap/__snapshots__/csr.test.js.snap
@@ -62385,6 +62385,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/disabled.vue 1`] = `
               >
                 请选择单张图片文件上传
               </small>
+              
             </div>
             
             <!---->
@@ -199397,7 +199398,6 @@ exports[`csr snapshot test > csr test ./src/upload/_example/base.vue 1`] = `
               </small>
               
               
-              
               <!---->
             </div>
             <!---->
@@ -199405,6 +199405,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/base.vue 1`] = `
             <!---->
             <!---->
             <!---->
+            
           </div>
         </div>
         <!---->
@@ -199493,7 +199494,6 @@ exports[`csr snapshot test > csr test ./src/upload/_example/base.vue 1`] = `
                 </svg>
               </div>
               
-              
               <!---->
             </div>
             <!---->
@@ -199501,6 +199501,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/base.vue 1`] = `
             <!---->
             <!---->
             <!---->
+            
           </div>
         </div>
         <!---->
@@ -199563,7 +199564,6 @@ exports[`csr snapshot test > csr test ./src/upload/_example/base.vue 1`] = `
               </small>
               
               
-              
               <!---->
             </div>
             <!---->
@@ -199571,6 +199571,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/base.vue 1`] = `
             <!---->
             <!---->
             <!---->
+            
           </div>
         </div>
         <!---->
@@ -199665,6 +199666,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/custom-drag.vue 1`]
     </div>
     
     <!---->
+    
   </div>
 </div>
 `;
@@ -199804,6 +199806,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/draggable.vue 1`] =
         <!---->
         <!---->
         <!---->
+        
       </div>
     </div>
     <!---->
@@ -199915,6 +199918,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/draggable.vue 1`] =
         <!---->
         <!---->
         <!---->
+        
       </div>
     </div>
     <!---->
@@ -200234,6 +200238,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/file-flow-list.vue 1
       </div>
       <!---->
       <!---->
+      
     </div>
   </div>
   <!---->
@@ -200420,6 +200425,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/image.vue 1`] = `
           >
             单张图片文件上传（上传成功状态演示）
           </small>
+          
         </div>
       </div>
       <!---->
@@ -200478,6 +200484,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/image.vue 1`] = `
           >
             单张图片文件上传（上传失败状态演示）
           </small>
+          
         </div>
       </div>
       <!---->
@@ -200639,6 +200646,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/image.vue 1`] = `
       <!---->
       <!---->
       <!---->
+      
     </div>
   </div>
   <!---->
@@ -200698,6 +200706,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/image.vue 1`] = `
       >
         允许选择多张图片文件上传，最多只能上传 3 张图片
       </small>
+      
     </div>
   </div>
   <!---->
@@ -200959,6 +200968,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/img-flow-list.vue 1`
       </div>
       <!---->
       <!---->
+      
     </div>
   </div>
   <!---->
@@ -201035,7 +201045,6 @@ exports[`csr snapshot test > csr test ./src/upload/_example/listType.vue 1`] = `
         
         
         
-        
         <!---->
       </div>
       <!---->
@@ -201043,6 +201052,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/listType.vue 1`] = `
       <!---->
       <!---->
       <!---->
+      
     </div>
   </header>
 </section>
@@ -201180,7 +201190,6 @@ exports[`csr snapshot test > csr test ./src/upload/_example/request-method.vue 1
         </small>
         
         
-        
         <!---->
       </div>
       <!---->
@@ -201188,6 +201197,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/request-method.vue 1
       <!---->
       <!---->
       <!---->
+      
     </div>
   </div>
   <!---->
@@ -201249,6 +201259,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/single-custom.vue 1`
       >
         上传文件大小在 5M 以内
       </small>
+      
     </div>
   </div>
   <!---->
@@ -201313,7 +201324,6 @@ exports[`csr snapshot test > csr test ./src/upload/_example/single-input.vue 1`]
       
       <!---->
       <!---->
-      
       <!---->
     </div>
     <!---->
@@ -201321,6 +201331,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/single-input.vue 1`]
     <!---->
     <!---->
     <!---->
+    
   </div>
 </div>
 `;
@@ -201382,7 +201393,6 @@ exports[`csr snapshot test > csr test ./src/upload/_example/table.vue 1`] = `
         
         
         
-        
         <!---->
       </div>
       <!---->
@@ -201390,6 +201400,7 @@ exports[`csr snapshot test > csr test ./src/upload/_example/table.vue 1`] = `
       <!---->
       <!---->
       <!---->
+      
     </div>
   </header>
   <div

From 7255d51a2ed82f3056ba9d57fa895b2381592dd7 Mon Sep 17 00:00:00 2001
From: chaishi <974383157@qq.com>
Date: Sun, 5 Nov 2023 19:24:02 +0800
Subject: [PATCH 08/11] feat(upload): support
 cancelUploadButton/uploadButton/showImageFileName

---
 src/upload/_example/image.vue            |  5 ++
 src/upload/_example/img-flow-list.vue    | 57 ++++++++++++++++--
 src/upload/props.ts                      | 13 ++++
 src/upload/themes/image-card.tsx         |  2 +
 src/upload/themes/multiple-flow-list.tsx | 77 ++++++++++++++++++------
 src/upload/type.ts                       | 19 ++++++
 src/upload/upload.en-US.md               |  3 +
 src/upload/upload.md                     |  3 +
 src/upload/upload.tsx                    |  4 ++
 9 files changed, 160 insertions(+), 23 deletions(-)

diff --git a/src/upload/_example/image.vue b/src/upload/_example/image.vue
index 17f4376126..90e962e411 100644
--- a/src/upload/_example/image.vue
+++ b/src/upload/_example/image.vue
@@ -1,6 +1,7 @@
 <template>
   <t-space direction="vertical">
     <t-space>
+      <t-checkbox v-model="showImageFileName"> 显示图片名称 </t-checkbox>
       <t-checkbox v-model="disabled"> 禁用状态 </t-checkbox>
       <t-checkbox v-model="uploadAllFilesInOneRequest"> 多个文件一个请求上传 </t-checkbox>
       <t-checkbox v-model="autoUpload"> 自动上传 </t-checkbox>
@@ -29,6 +30,7 @@
         accept="image/*"
         :disabled="disabled"
         :auto-upload="autoUpload"
+        :show-image-file-name="showImageFileName"
         :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
         :locale="{
           triggerUploadText: {
@@ -49,6 +51,7 @@
         theme="image"
         tips="单张图片文件上传（上传失败状态演示）"
         accept="image/*"
+        :show-image-file-name="showImageFileName"
         :format-response="formatResponse"
       ></t-upload>
     </t-space>
@@ -62,6 +65,7 @@
       :disabled="disabled"
       :auto-upload="autoUpload"
       :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
+      :show-image-file-name="showImageFileName"
       :format-response="formatImgResponse"
       @fail="handleFail"
     ></t-upload>
@@ -96,6 +100,7 @@ const fileFail = ref([]);
 const disabled = ref(false);
 const uploadAllFilesInOneRequest = ref(false);
 const autoUpload = ref(true);
+const showImageFileName = ref(true);
 
 const uploadRef1 = ref();
 const uploadRef2 = ref();
diff --git a/src/upload/_example/img-flow-list.vue b/src/upload/_example/img-flow-list.vue
index 6f94b10539..d8a424ffdc 100644
--- a/src/upload/_example/img-flow-list.vue
+++ b/src/upload/_example/img-flow-list.vue
@@ -1,13 +1,14 @@
 <template>
   <t-space direction="vertical">
-    <div>
-      是否自动上传：
-      <t-switch v-model="autoUpload" />
-    </div>
+    <t-space size="36px">
+      <div>AutoUpload: <t-switch v-model="autoUpload" /></div>
+      <t-checkbox v-model="showImageFileName"> Show Image Name </t-checkbox>
+      <t-checkbox v-model="showUploadButton"> Show UploadButton Or CancelUploadButton </t-checkbox>
+    </t-space>
     <br />
-
     <!-- action 上传地址，使用组件内部上传逻辑，action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo" -->
     <!-- request-method 自定义上传方法，自定义上传逻辑 -->
+    <!-- auto-upload=false, `uploadButton` and `cancelUploadButton` support ButtonProps; also support slot -->
     <t-upload
       v-model="files"
       placeholder="支持批量上传图片文件"
@@ -16,8 +17,11 @@
       multiple
       :request-method="requestMethod1"
       :auto-upload="autoUpload"
+      :show-image-file-name="showImageFileName"
       :max="8"
       :abridge-name="[6, 6]"
+      :upload-button="showUploadButton ? undefined : null"
+      :cancel-upload-button="showUploadButton ? { theme: 'default', content: '取消上传' } : null"
     ></t-upload>
 
     <!-- action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo" -->
@@ -34,6 +38,15 @@
       :abridgeName="[6, 6]"
       :max="8"
     ></t-upload> -->
+
+    <br />
+    <t-divider align="left">Different Status Images</t-divider>
+    <t-upload
+      :files="staticFiles"
+      theme="image-flow"
+      :show-image-file-name="showImageFileName"
+      class="static-image-list"
+    ></t-upload>
   </t-space>
 </template>
 
@@ -41,6 +54,8 @@
 import { ref } from 'vue';
 
 const autoUpload = ref(false);
+const showImageFileName = ref(true);
+const showUploadButton = ref(true);
 const files = ref([
   {
     url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
@@ -49,6 +64,30 @@ const files = ref([
   },
 ]);
 
+const staticFiles = ref([
+  {
+    url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+    name: 'loading.svg',
+    status: 'success',
+  },
+  {
+    url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+    name: 'loading.svg',
+    status: 'waiting',
+  },
+  {
+    // url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+    name: 'loading.svg',
+    status: 'progress',
+    percent: 10,
+  },
+  {
+    url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+    name: 'loading.svg',
+    status: 'fail',
+  },
+]);
+
 // 示例代码：自定义上传方法，一个请求上传一个文件
 // eslint-disable-next-line
 const requestMethod1 = () => {
@@ -78,3 +117,11 @@ const requestMethod2 = () => {
   });
 };
 </script>
+
+<style>
+.static-image-list {
+  .t-upload__flow-op {
+    display: none;
+  }
+}
+</style>
diff --git a/src/upload/props.ts b/src/upload/props.ts
index 0d5f3a2192..b4c138b859 100644
--- a/src/upload/props.ts
+++ b/src/upload/props.ts
@@ -37,6 +37,10 @@ export default {
   beforeUpload: {
     type: Function as PropType<TdUploadProps['beforeUpload']>,
   },
+  /** 批量文件/图片上传，`autoUpload=false` 场景下，透传“取消上传”按钮属性 */
+  cancelUploadButton: {
+    type: [Object, Function] as PropType<TdUploadProps['cancelUploadButton']>,
+  },
   /** 上传请求所需的额外字段，默认字段有 `file`，表示文件信息。可以添加额外的文件名字段，如：`{file_name: "custom-file-name.txt"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段 */
   data: {
     type: Object as PropType<TdUploadProps['data']>,
@@ -134,6 +138,11 @@ export default {
   requestMethod: {
     type: Function as PropType<TdUploadProps['requestMethod']>,
   },
+  /** 是否显示图片的文件名称 */
+  showImageFileName: {
+    type: Boolean,
+    default: true,
+  },
   /** 是否在文件列表中显示缩略图，`theme=file-flow` 时有效 */
   showThumbnail: Boolean,
   /** 是否显示上传进度 */
@@ -176,6 +185,10 @@ export default {
   },
   /** 是否在同一个请求中上传全部文件，默认一个请求上传一个文件。多文件上传时有效 */
   uploadAllFilesInOneRequest: Boolean,
+  /** 批量文件/图片上传，`autoUpload=false` 场景下，透传“点击上传”按钮属性 */
+  uploadButton: {
+    type: [Object, Function] as PropType<TdUploadProps['uploadButton']>,
+  },
   /** 是否允许粘贴上传剪贴板中的文件 */
   uploadPastedFiles: Boolean,
   /** 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传。 */
diff --git a/src/upload/themes/image-card.tsx b/src/upload/themes/image-card.tsx
index 69675ece6d..ccc2f84301 100644
--- a/src/upload/themes/image-card.tsx
+++ b/src/upload/themes/image-card.tsx
@@ -41,6 +41,7 @@ export default defineComponent({
     uploadFiles: Function as PropType<ImageCardUploadProps['uploadFiles']>,
     cancelUpload: Function as PropType<ImageCardUploadProps['cancelUpload']>,
     onPreview: Function as PropType<ImageCardUploadProps['onPreview']>,
+    showImageFileName: Boolean,
   },
 
   setup(props) {
@@ -155,6 +156,7 @@ export default defineComponent({
                   {file.status === 'fail' && renderFailFile(file, index, loadCard)}
                   {!['progress', 'fail'].includes(file.status) && renderMainContent(file, index)}
                   {fileName &&
+                    props.showImageFileName &&
                     (file.url ? (
                       <Link href={file.url} class={fileNameClassName} target="_blank" hover="color" size="small">
                         {fileName}
diff --git a/src/upload/themes/multiple-flow-list.tsx b/src/upload/themes/multiple-flow-list.tsx
index 237bc88359..f8bba86219 100644
--- a/src/upload/themes/multiple-flow-list.tsx
+++ b/src/upload/themes/multiple-flow-list.tsx
@@ -12,6 +12,8 @@ import {
   FileIcon,
   VideoIcon,
 } from 'tdesign-icons-vue-next';
+import isFunction from 'lodash/isFunction';
+import isObject from 'lodash/isObject';
 import useGlobalIcon from '../../hooks/useGlobalIcon';
 import ImageViewer, { ImageViewerProps } from '../../image-viewer';
 import { CommonDisplayFileProps } from '../interface';
@@ -43,6 +45,8 @@ export interface ImageFlowListProps extends CommonDisplayFileProps {
   isBatchUpload?: boolean;
   draggable?: boolean;
   onPreview?: TdUploadProps['onPreview'];
+  uploadButton?: TdUploadProps['uploadButton'];
+  cancelUploadButton?: TdUploadProps['cancelUploadButton'];
 }
 
 export default defineComponent({
@@ -57,6 +61,9 @@ export default defineComponent({
     disabled: Boolean,
     isBatchUpload: Boolean,
     draggable: Boolean,
+    showImageFileName: Boolean,
+    uploadButton: Object as PropType<ImageFlowListProps['uploadButton']>,
+    cancelUploadButton: Object as PropType<ImageFlowListProps['cancelUploadButton']>,
     onPreview: Function as PropType<ImageFlowListProps['onPreview']>,
   },
 
@@ -151,7 +158,7 @@ export default defineComponent({
               <Image class={`${uploadPrefix.value}__card-image`} src={file.url || file.raw} error="" loading="" />
             )}
             <div class={`${uploadPrefix.value}__card-mask`}>
-              {file.url && (
+              {(file.url || file.raw) && ['waiting', 'success'].includes(file.status) && (
                 <span class={`${uploadPrefix.value}__card-mask-item`}>
                   <BrowseIcon
                     onClick={({ e }: { e: MouseEvent }) => {
@@ -173,7 +180,12 @@ export default defineComponent({
               )}
             </div>
           </div>
-          <p class={`${uploadPrefix.value}__card-name`}>{fileName}</p>
+          {props.showImageFileName && (
+            <p class={[`${uploadPrefix.value}__card-name`, `${uploadPrefix.value}__flow-status`]}>
+              {['success', 'waiting'].includes(file.status) && iconMap[file.status]}
+              {fileName}
+            </p>
+          )}
         </li>
       );
     };
@@ -349,6 +361,10 @@ export default defineComponent({
 
     return () => {
       const cardClassName = `${uploadPrefix.value}__flow-card-area`;
+      const cancelUploadDisabled = disabled.value || !uploading.value;
+      const hasCancelUploadTNode = slots.uploadButton || isFunction(props.uploadButton);
+      const uploadButtonDisabled = Boolean(disabled.value || uploading.value || !displayFiles.value.length);
+      const hasUploadButtonTNode = slots.cancelUploadButton || isFunction(props.cancelUploadButton);
       return (
         <div class={`${uploadPrefix.value}__flow ${uploadPrefix.value}__flow-${props.theme}`}>
           <div class={`${uploadPrefix.value}__flow-op`}>
@@ -375,23 +391,48 @@ export default defineComponent({
               </div>
             ))}
 
-          {!props.autoUpload && (
+          {!props.autoUpload && (props.uploadButton !== null || props.cancelUploadButton !== null) && (
             <div class={`${uploadPrefix.value}__flow-bottom`}>
-              <TButton
-                theme="default"
-                disabled={disabled.value || !uploading.value}
-                content={locale.value?.cancelUploadText}
-                class={`${uploadPrefix.value}__cancel`}
-                onClick={(e) => props.cancelUpload?.({ e })}
-              ></TButton>
-              <TButton
-                disabled={disabled.value || uploading.value || !displayFiles.value.length}
-                theme="primary"
-                loading={uploading.value}
-                class={`${uploadPrefix.value}__continue`}
-                content={uploadText.value}
-                onClick={() => props.uploadFiles?.()}
-              ></TButton>
+              {props.cancelUploadButton !== null &&
+                (hasCancelUploadTNode ? (
+                  renderTNodeJSX('cancelUploadButton', {
+                    params: {
+                      disabled: cancelUploadDisabled,
+                      cancelUploadText: locale.value?.cancelUploadText,
+                      cancelUpload: props.cancelUpload,
+                    },
+                  })
+                ) : (
+                  <TButton
+                    theme="default"
+                    disabled={cancelUploadDisabled}
+                    content={locale.value?.cancelUploadText}
+                    class={`${uploadPrefix.value}__cancel`}
+                    onClick={(e) => props.cancelUpload?.({ e })}
+                    {...(isObject(props.cancelUploadButton) ? props.cancelUploadButton : {})}
+                  ></TButton>
+                ))}
+              {props.uploadButton !== null &&
+                (hasUploadButtonTNode ? (
+                  renderTNodeJSX('uploadButton', {
+                    params: {
+                      disabled: uploadButtonDisabled,
+                      uploading: uploading.value,
+                      uploadText: uploadText.value,
+                      uploadFiles: props.uploadFiles,
+                    },
+                  })
+                ) : (
+                  <TButton
+                    disabled={uploadButtonDisabled}
+                    theme="primary"
+                    loading={uploading.value}
+                    class={`${uploadPrefix.value}__continue`}
+                    content={uploadText.value}
+                    onClick={() => props.uploadFiles?.()}
+                    {...(isObject(props.uploadButton) ? props.uploadButton : {})}
+                  ></TButton>
+                ))}
             </div>
           )}
 
diff --git a/src/upload/type.ts b/src/upload/type.ts
index 3e962a9b6b..0154073278 100644
--- a/src/upload/type.ts
+++ b/src/upload/type.ts
@@ -42,6 +42,13 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
    * 如果是自动上传模式 `autoUpload=true`，表示单个文件上传之前的钩子函数，若函数返回值为 `false` 则表示不上传当前文件。<br/>如果是非自动上传模式 `autoUpload=false`，函数返回值为 `false` 时表示从上传文件中剔除当前文件
    */
   beforeUpload?: (file: UploadFile) => boolean | Promise<boolean>;
+  /**
+   * 批量文件/图片上传，`autoUpload=false` 场景下，透传“取消上传”按钮属性
+   */
+  cancelUploadButton?:
+    | null
+    | ButtonProps
+    | TNode<{ disabled: boolean; cancelUploadText: string; cancelUpload: (ctx: { e: MouseEvent }) => void }>;
   /**
    * 上传请求所需的额外字段，默认字段有 `file`，表示文件信息。可以添加额外的文件名字段，如：`{file_name: "custom-file-name.txt"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段
    */
@@ -142,6 +149,11 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
    * 自定义上传方法。返回值 `status` 表示上传成功或失败；`error` 或 `response.error` 表示上传失败的原因；<br/>`response` 表示请求上传成功后的返回数据，`response.url` 表示上传成功后的图片/文件地址，`response.files` 表示一个请求上传多个文件/图片后的返回值。<br/>示例一：`{ status: 'fail', error: '上传失败', response }`。<br/>示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。<br/> 示例三：`{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}`
    */
   requestMethod?: (files: UploadFile | UploadFile[]) => Promise<RequestMethodResponse>;
+  /**
+   * 是否显示图片的文件名称
+   * @default true
+   */
+  showImageFileName?: boolean;
   /**
    * 是否在文件列表中显示缩略图，`theme=file-flow` 时有效
    * @default false
@@ -182,6 +194,13 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
    * @default false
    */
   uploadAllFilesInOneRequest?: boolean;
+  /**
+   * 批量文件/图片上传，`autoUpload=false` 场景下，透传“点击上传”按钮属性
+   */
+  uploadButton?:
+    | null
+    | ButtonProps
+    | TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>;
   /**
    * 是否允许粘贴上传剪贴板中的文件
    * @default false
diff --git a/src/upload/upload.en-US.md b/src/upload/upload.en-US.md
index 15345f7f06..8a74c702ba 100644
--- a/src/upload/upload.en-US.md
+++ b/src/upload/upload.en-US.md
@@ -12,6 +12,7 @@ allowUploadDuplicateFile | Boolean | false | allow to upload duplicate name file
 autoUpload | Boolean | true | post upload request automatically after files being selected | N
 beforeAllFilesUpload | Function | - | before all files upload, return false can stop uploading file。Typescript：`(file: UploadFile[]) => boolean \| Promise<boolean>` | N
 beforeUpload | Function | - | stop one of files to upload。Typescript：`(file: UploadFile) => boolean \| Promise<boolean>` | N
+cancelUploadButton | Object / Slot / Function | - | cancel upload button props, which showed on `autoUpload=false` and multiple files/images upload。Typescript：`null \| ButtonProps \| TNode<{ disabled: boolean; cancelUploadText: string; cancelUpload: (ctx: { e: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 data | Object | - | extra request data of uploading. `formatRequest` can redefine all request data。Typescript：`Record<string, any> \| ((files: UploadFile[]) => Record<string, any>)` | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | - | make upload to be disabled | N
@@ -35,6 +36,7 @@ multiple | Boolean | false | multiple files uploading | N
 name | String | file | field name of files in upload request data | N
 placeholder | String | - | placeholder | N
 requestMethod | Function | - | custom upload request method。Typescript：`(files: UploadFile \| UploadFile[]) => Promise<RequestMethodResponse>` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
+showImageFileName | Boolean | true | show image's name | N
 showThumbnail | Boolean | false | show thumbnail before file name, only works on `theme=file-flow`  | N
 showUploadProgress | Boolean | true | show upload progress nodes | N
 sizeLimit | Number / Object | - | files size limit。Typescript：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
@@ -44,6 +46,7 @@ tips | String / Slot / Function | - | tips text below upload component, define i
 trigger | Slot / Function | - | trigger elements UI。Typescript：`TNode<TriggerContext>` `interface TriggerContext { dragActive?: boolean;  files: UploadFile[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
 triggerButtonProps | Object | - | trigger button props, it can be used to change color/size/href/... of the trigger button。Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
 uploadAllFilesInOneRequest | Boolean | false | uploading all files in one request | N
+uploadButton | Object / Slot / Function | - | upload button props, which showed on `autoUpload=false` and multiple files/images upload。Typescript：`null \| ButtonProps \| TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 uploadPastedFiles | Boolean | false | allow to upload files in clipboard after pasting | N
 useMockProgress | Boolean | true | use mock progress, instead of real progress | N
 value | Array | [] | file list。`v-model` and `v-model:value` is supported。Typescript：`Array<T>` | N
diff --git a/src/upload/upload.md b/src/upload/upload.md
index bcaa427fb6..bf71981a9d 100644
--- a/src/upload/upload.md
+++ b/src/upload/upload.md
@@ -12,6 +12,7 @@ allowUploadDuplicateFile | Boolean | false | 是否允许重复上传相同文
 autoUpload | Boolean | true | 是否在选择文件后自动发起请求上传文件 | N
 beforeAllFilesUpload | Function | - | 如果是自动上传模式 `autoUpload=true`，表示全部文件上传之前的钩子函数，函数参数为上传的文件，函数返回值决定是否继续上传，若返回值为 `false` 则终止上传。<br/>如果是非自动上传模式 `autoUpload=false`，则函数返回值为 `false` 时表示本次选中的文件不会加入到文件列表中，即不触发 `onChange` 事件。TS 类型：`(file: UploadFile[]) => boolean \| Promise<boolean>` | N
 beforeUpload | Function | - | 如果是自动上传模式 `autoUpload=true`，表示单个文件上传之前的钩子函数，若函数返回值为 `false` 则表示不上传当前文件。<br/>如果是非自动上传模式 `autoUpload=false`，函数返回值为 `false` 时表示从上传文件中剔除当前文件。TS 类型：`(file: UploadFile) => boolean \| Promise<boolean>` | N
+cancelUploadButton | Object / Slot / Function | - | 批量文件/图片上传，`autoUpload=false` 场景下，透传“取消上传”按钮属性。TS 类型：`null \| ButtonProps \| TNode<{ disabled: boolean; cancelUploadText: string; cancelUpload: (ctx: { e: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 data | Object | - | 上传请求所需的额外字段，默认字段有 `file`，表示文件信息。可以添加额外的文件名字段，如：`{file_name: "custom-file-name.txt"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段。TS 类型：`Record<string, any> \| ((files: UploadFile[]) => Record<string, any>)` | N
 default | String / Slot / Function | - | 非拖拽场景，指触发上传的元素，如：“选择文件”。如果是拖拽场景，则是指拖拽区域。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用 | N
@@ -35,6 +36,7 @@ multiple | Boolean | false | 支持多文件上传 | N
 name | String | file | 文件上传时的名称 | N
 placeholder | String | - | 占位符 | N
 requestMethod | Function | - | 自定义上传方法。返回值 `status` 表示上传成功或失败；`error` 或 `response.error` 表示上传失败的原因；<br/>`response` 表示请求上传成功后的返回数据，`response.url` 表示上传成功后的图片/文件地址，`response.files` 表示一个请求上传多个文件/图片后的返回值。<br/>示例一：`{ status: 'fail', error: '上传失败', response }`。<br/>示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。<br/> 示例三：`{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}`。TS 类型：`(files: UploadFile \| UploadFile[]) => Promise<RequestMethodResponse>` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
+showImageFileName | Boolean | true | 是否显示图片的文件名称 | N
 showThumbnail | Boolean | false | 是否在文件列表中显示缩略图，`theme=file-flow` 时有效 | N
 showUploadProgress | Boolean | true | 是否显示上传进度 | N
 sizeLimit | Number / Object | - | 图片文件大小限制，默认单位 KB。可选单位有：`'B' \| 'KB' \| 'MB' \| 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`。TS 类型：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
@@ -44,6 +46,7 @@ tips | String / Slot / Function | - | 组件下方文本提示，可以使用 `s
 trigger | Slot / Function | - | 触发上传的元素，`files` 指本次显示的全部文件。TS 类型：`TNode<TriggerContext>` `interface TriggerContext { dragActive?: boolean;  files: UploadFile[] }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
 triggerButtonProps | Object | - | 透传选择按钮全部属性。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
 uploadAllFilesInOneRequest | Boolean | false | 是否在同一个请求中上传全部文件，默认一个请求上传一个文件。多文件上传时有效 | N
+uploadButton | Object / Slot / Function | - | 批量文件/图片上传，`autoUpload=false` 场景下，透传“点击上传”按钮属性。TS 类型：`null \| ButtonProps \| TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 uploadPastedFiles | Boolean | false | 是否允许粘贴上传剪贴板中的文件 | N
 useMockProgress | Boolean | true | 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传。 | N
 value | Array | [] | 已上传文件列表，同 `files`。TS 类型：`UploadFile`。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`Array<T>` | N
diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx
index f56dc30e25..cce5e746b8 100644
--- a/src/upload/upload.tsx
+++ b/src/upload/upload.tsx
@@ -151,6 +151,7 @@ export default defineComponent({
         uploadFiles={uploadFiles}
         cancelUpload={cancelUpload}
         onPreview={props.onPreview}
+        showImageFileName={props.showImageFileName}
         v-slots={{
           fileListDisplay: slots.fileListDisplay,
           'file-list-display': slots['file-list-display'],
@@ -167,7 +168,10 @@ export default defineComponent({
         uploadFiles={uploadFiles}
         cancelUpload={cancelUpload}
         onPreview={props.onPreview}
+        showImageFileName={props.showImageFileName}
         showThumbnail={props.showThumbnail}
+        uploadButton={props.uploadButton}
+        cancelUploadButton={props.cancelUploadButton}
         v-slots={{
           fileListDisplay: slots.fileListDisplay,
           'file-list-display': slots['file-list-display'],

From dfe99cea4a8ec2231a9542317c9068257096f7db Mon Sep 17 00:00:00 2001
From: chaishi <974383157@qq.com>
Date: Sun, 5 Nov 2023 19:43:19 +0800
Subject: [PATCH 09/11] feat(upload): image viewer

---
 src/image-viewer/utils.ts                     |   2 +-
 .../__snapshots__/vitest-upload.test.jsx.snap |  98 ++-
 src/upload/themes/multiple-flow-list.tsx      |   2 +-
 test/unit/snap/__snapshots__/csr.test.js.snap | 606 +++++++++++++++++-
 test/unit/snap/__snapshots__/ssr.test.js.snap |   4 +-
 5 files changed, 643 insertions(+), 69 deletions(-)

diff --git a/src/image-viewer/utils.ts b/src/image-viewer/utils.ts
index a8ff253f67..bf2d013b6a 100644
--- a/src/image-viewer/utils.ts
+++ b/src/image-viewer/utils.ts
@@ -33,7 +33,7 @@ export const downloadFile = function (imgSrc: string) {
 };
 
 const isImageInfo = (image: string | File | ImageInfo): image is ImageInfo => {
-  return !isString(image) && !(image instanceof File);
+  return !!image && !isString(image) && !(image instanceof File);
 };
 
 export const formatImages = (images: TdImageViewerProps['images']): ImageInfo[] => {
diff --git a/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap b/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap
index ee13165e80..c9764537de 100644
--- a/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap
+++ b/src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap
@@ -1212,7 +1212,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             <div
               class="t-upload__card-mask"
             >
-              
+              <!---->
               <span
                 class="t-upload__card-mask-item t-upload__delete"
               >
@@ -1232,8 +1232,20 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             </div>
           </div>
           <p
-            class="t-upload__card-name"
+            class="t-upload__card-name t-upload__flow-status"
           >
+            <svg
+              class="t-icon t-icon-check-circle-filled"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                fill="currentColor"
+              />
+            </svg>
             img.txt
           </p>
         </li>
@@ -1337,8 +1349,20 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             </div>
           </div>
           <p
-            class="t-upload__card-name"
+            class="t-upload__card-name t-upload__flow-status"
           >
+            <svg
+              class="t-icon t-icon-check-circle-filled"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                fill="currentColor"
+              />
+            </svg>
             img1.txt
           </p>
         </li>
@@ -1442,8 +1466,20 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             </div>
           </div>
           <p
-            class="t-upload__card-name"
+            class="t-upload__card-name t-upload__flow-status"
           >
+            <svg
+              class="t-icon t-icon-time-filled"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M12 23a11 11 0 110-22 11 11 0 010 22zm1-17.5h-2v6.91l4 4L16.41 15 13 11.59V5.5z"
+                fill="currentColor"
+              />
+            </svg>
             img2.txt
           </p>
         </li>
@@ -1477,29 +1513,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             <div
               class="t-upload__card-mask"
             >
-              <span
-                class="t-upload__card-mask-item"
-              >
-                <svg
-                  class="t-icon t-icon-browse"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <g
-                    clipPath="url(#clip0_8726_7319)"
-                  >
-                    <path
-                      d="M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z"
-                      fill="currentColor"
-                    />
-                  </g>
-                </svg>
-                <span
-                  class="t-upload__card-mask-item-divider"
-                />
-              </span>
+              <!---->
               <span
                 class="t-upload__card-mask-item t-upload__delete"
               >
@@ -1519,8 +1533,9 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             </div>
           </div>
           <p
-            class="t-upload__card-name"
+            class="t-upload__card-name t-upload__flow-status"
           >
+            <!---->
             img3.txt
           </p>
         </li>
@@ -1567,29 +1582,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             <div
               class="t-upload__card-mask"
             >
-              <span
-                class="t-upload__card-mask-item"
-              >
-                <svg
-                  class="t-icon t-icon-browse"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <g
-                    clipPath="url(#clip0_8726_7319)"
-                  >
-                    <path
-                      d="M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z"
-                      fill="currentColor"
-                    />
-                  </g>
-                </svg>
-                <span
-                  class="t-upload__card-mask-item-divider"
-                />
-              </span>
+              <!---->
               <span
                 class="t-upload__card-mask-item t-upload__delete"
               >
@@ -1609,8 +1602,9 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             </div>
           </div>
           <p
-            class="t-upload__card-name"
+            class="t-upload__card-name t-upload__flow-status"
           >
+            <!---->
             img4.txt
           </p>
         </li>
diff --git a/src/upload/themes/multiple-flow-list.tsx b/src/upload/themes/multiple-flow-list.tsx
index f8bba86219..109e09a91a 100644
--- a/src/upload/themes/multiple-flow-list.tsx
+++ b/src/upload/themes/multiple-flow-list.tsx
@@ -158,7 +158,7 @@ export default defineComponent({
               <Image class={`${uploadPrefix.value}__card-image`} src={file.url || file.raw} error="" loading="" />
             )}
             <div class={`${uploadPrefix.value}__card-mask`}>
-              {(file.url || file.raw) && ['waiting', 'success'].includes(file.status) && (
+              {(file.url || file.raw) && !['progress', 'fail'].includes(file.status) && (
                 <span class={`${uploadPrefix.value}__card-mask-item`}>
                   <BrowseIcon
                     onClick={({ e }: { e: MouseEvent }) => {
diff --git a/test/unit/snap/__snapshots__/csr.test.js.snap b/test/unit/snap/__snapshots__/csr.test.js.snap
index c19f091bd3..8b84049b83 100644
--- a/test/unit/snap/__snapshots__/csr.test.js.snap
+++ b/test/unit/snap/__snapshots__/csr.test.js.snap
@@ -200263,6 +200263,35 @@ exports[`csr snapshot test > csr test ./src/upload/_example/image.vue 1`] = `
     >
       
       
+      <div
+        class="t-space-item"
+      >
+        <label
+          class="t-checkbox t-is-checked"
+          tabindex="0"
+        >
+          
+          <input
+            class="t-checkbox__former"
+            tabindex="-1"
+            type="checkbox"
+          />
+          <span
+            class="t-checkbox__input"
+          />
+          <span
+            class="t-checkbox__label"
+          >
+            
+             显示图片名称 
+            
+          </span>
+          
+        </label>
+      </div>
+      <!---->
+      
+      
       <div
         class="t-space-item"
       >
@@ -200725,23 +200754,95 @@ exports[`csr snapshot test > csr test ./src/upload/_example/img-flow-list.vue 1`
   <div
     class="t-space-item"
   >
-    <div>
-       是否自动上传： 
+    <div
+      class="t-space t-space-horizontal"
+      style="gap: 36px;"
+    >
+      
+      
       <div
-        class="t-switch t-size-m"
-        disabled="false"
+        class="t-space-item"
       >
-        <span
-          class="t-switch__handle"
+        <div>
+          AutoUpload: 
+          <div
+            class="t-switch t-size-m"
+            disabled="false"
+          >
+            <span
+              class="t-switch__handle"
+            >
+              <!---->
+            </span>
+            <div
+              class="t-switch__content t-size-m"
+            >
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <!---->
+      
+      
+      <div
+        class="t-space-item"
+      >
+        <label
+          class="t-checkbox t-is-checked"
+          tabindex="0"
         >
-          <!---->
-        </span>
-        <div
-          class="t-switch__content t-size-m"
+          
+          <input
+            class="t-checkbox__former"
+            tabindex="-1"
+            type="checkbox"
+          />
+          <span
+            class="t-checkbox__input"
+          />
+          <span
+            class="t-checkbox__label"
+          >
+            
+             Show Image Name 
+            
+          </span>
+          
+        </label>
+      </div>
+      <!---->
+      
+      
+      <div
+        class="t-space-item"
+      >
+        <label
+          class="t-checkbox t-is-checked"
+          tabindex="0"
         >
-          <!---->
-        </div>
+          
+          <input
+            class="t-checkbox__former"
+            tabindex="-1"
+            type="checkbox"
+          />
+          <span
+            class="t-checkbox__input"
+          />
+          <span
+            class="t-checkbox__label"
+          >
+            
+             Show UploadButton Or CancelUploadButton 
+            
+          </span>
+          
+        </label>
       </div>
+      <!---->
+      
+      
     </div>
   </div>
   <!---->
@@ -200923,8 +201024,20 @@ exports[`csr snapshot test > csr test ./src/upload/_example/img-flow-list.vue 1`
                 </div>
               </div>
               <p
-                class="t-upload__card-name"
+                class="t-upload__card-name t-upload__flow-status"
               >
+                <svg
+                  class="t-icon t-icon-check-circle-filled"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                    fill="currentColor"
+                  />
+                </svg>
                 loading.svg
               </p>
             </li>
@@ -200974,6 +201087,473 @@ exports[`csr snapshot test > csr test ./src/upload/_example/img-flow-list.vue 1`
   <!---->
   
   
+  <div
+    class="t-space-item"
+  >
+    <br />
+  </div>
+  <!---->
+  
+  
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-divider t-divider--horizontal t-divider--with-text t-divider--with-text-left"
+    >
+      <span
+        class="t-divider__inner-text"
+      >
+        
+        Different Status Images
+        
+      </span>
+    </div>
+  </div>
+  <!---->
+  
+  
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-upload static-image-list"
+    >
+      <input
+        accept=""
+        hidden=""
+        type="file"
+      />
+      <!---->
+      <!---->
+      <!---->
+      <div
+        class="t-upload__flow t-upload__flow-image-flow"
+      >
+        <div
+          class="t-upload__flow-op"
+        >
+          
+          <div
+            class="t-upload__trigger"
+          >
+            <button
+              class="t-button t-button--variant-outline t-button--theme-default"
+              href=""
+              tabindex="0"
+              type="button"
+            >
+              
+              <svg
+                class="t-icon t-icon-upload"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                class="t-button__text"
+              >
+                
+                重新选择
+                
+              </span>
+              
+            </button>
+          </div>
+          
+          
+        </div>
+        <div
+          class="t-upload__flow-card-area"
+        >
+          <ul
+            class="t-upload__card clearfix"
+          >
+            
+            <li
+              class="t-upload__card-item"
+            >
+              <div
+                class="t-upload__card-content t-is-bordered"
+              >
+                <!---->
+                <div
+                  class="t-image__wrapper t-image__wrapper--shape-square t-upload__card-image"
+                  fallback=""
+                  referrerpolicy="strict-origin-when-cross-origin"
+                >
+                  <!---->
+                  <!---->
+                  <!---->
+                  <img
+                    alt=""
+                    class="t-image t-image--fit-fill t-image--position-center"
+                    referrerpolicy="strict-origin-when-cross-origin"
+                    src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+                  />
+                  <div
+                    class="t-image__loading"
+                  >
+                    <div
+                      class="t-space t-space-align-center t-space-vertical"
+                      style="gap: 8px;"
+                    >
+                      
+                      
+                      <div
+                        class="t-space-item"
+                      >
+                        <svg
+                          class="t-icon t-icon-image"
+                          fill="none"
+                          height="1em"
+                          style="font-size: 24px;"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                        >
+                          <path
+                            d="M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </div>
+                      <!---->
+                      
+                      
+                    </div>
+                  </div>
+                  <!---->
+                  <!---->
+                </div>
+                <div
+                  class="t-upload__card-mask"
+                >
+                  <span
+                    class="t-upload__card-mask-item"
+                  >
+                    <svg
+                      class="t-icon t-icon-browse"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <g
+                        clipPath="url(#clip0_8726_7319)"
+                      >
+                        <path
+                          d="M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z"
+                          fill="currentColor"
+                        />
+                      </g>
+                    </svg>
+                    <span
+                      class="t-upload__card-mask-item-divider"
+                    />
+                  </span>
+                  <span
+                    class="t-upload__card-mask-item t-upload__delete"
+                  >
+                    <svg
+                      class="t-icon t-icon-delete"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M7.5 1h9v3H22v2h-2.03l-.5 17H4.53l-.5-17H2V4h5.5V1zm2 3h5V3h-5v1zM6.03 6l.44 15h11.06l.44-15H6.03zM13 8v11h-2V8h2z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </div>
+              <p
+                class="t-upload__card-name t-upload__flow-status"
+              >
+                <svg
+                  class="t-icon t-icon-check-circle-filled"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                    fill="currentColor"
+                  />
+                </svg>
+                loading.svg
+              </p>
+            </li>
+            <li
+              class="t-upload__card-item"
+            >
+              <div
+                class="t-upload__card-content"
+              >
+                <!---->
+                <div
+                  class="t-image__wrapper t-image__wrapper--shape-square t-upload__card-image"
+                  fallback=""
+                  referrerpolicy="strict-origin-when-cross-origin"
+                >
+                  <!---->
+                  <!---->
+                  <!---->
+                  <img
+                    alt=""
+                    class="t-image t-image--fit-fill t-image--position-center"
+                    referrerpolicy="strict-origin-when-cross-origin"
+                    src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+                  />
+                  <div
+                    class="t-image__loading"
+                  >
+                    <div
+                      class="t-space t-space-align-center t-space-vertical"
+                      style="gap: 8px;"
+                    >
+                      
+                      
+                      <div
+                        class="t-space-item"
+                      >
+                        <svg
+                          class="t-icon t-icon-image"
+                          fill="none"
+                          height="1em"
+                          style="font-size: 24px;"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                        >
+                          <path
+                            d="M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </div>
+                      <!---->
+                      
+                      
+                    </div>
+                  </div>
+                  <!---->
+                  <!---->
+                </div>
+                <div
+                  class="t-upload__card-mask"
+                >
+                  <span
+                    class="t-upload__card-mask-item"
+                  >
+                    <svg
+                      class="t-icon t-icon-browse"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <g
+                        clipPath="url(#clip0_8726_7319)"
+                      >
+                        <path
+                          d="M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z"
+                          fill="currentColor"
+                        />
+                      </g>
+                    </svg>
+                    <span
+                      class="t-upload__card-mask-item-divider"
+                    />
+                  </span>
+                  <span
+                    class="t-upload__card-mask-item t-upload__delete"
+                  >
+                    <svg
+                      class="t-icon t-icon-delete"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M7.5 1h9v3H22v2h-2.03l-.5 17H4.53l-.5-17H2V4h5.5V1zm2 3h5V3h-5v1zM6.03 6l.44 15h11.06l.44-15H6.03zM13 8v11h-2V8h2z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </div>
+              <p
+                class="t-upload__card-name t-upload__flow-status"
+              >
+                <svg
+                  class="t-icon t-icon-time-filled"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 23a11 11 0 110-22 11 11 0 010 22zm1-17.5h-2v6.91l4 4L16.41 15 13 11.59V5.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+                loading.svg
+              </p>
+            </li>
+            <li
+              class="t-upload__card-item"
+            >
+              <div
+                class="t-upload__card-content t-is-bordered"
+              >
+                <div
+                  class="t-upload__card-status-wrap t-upload__image-flow-progress"
+                >
+                  <div
+                    class="t-loading--center t-size-m t-loading"
+                  >
+                    <svg
+                      class="t-loading__gradient t-icon-loading"
+                      height="1em"
+                      size="medium"
+                      version="1.1"
+                      viewBox="0 0 12 12"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <foreignobject
+                        height="12"
+                        width="12"
+                        x="0"
+                        y="0"
+                      >
+                        <div
+                          class="t-loading__gradient-conic"
+                        />
+                      </foreignobject>
+                    </svg>
+                    <!---->
+                  </div>
+                  <p>
+                    上传中
+                     10%
+                  </p>
+                </div>
+                <!---->
+                <div
+                  class="t-upload__card-mask"
+                >
+                  <!---->
+                  <span
+                    class="t-upload__card-mask-item t-upload__delete"
+                  >
+                    <svg
+                      class="t-icon t-icon-delete"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M7.5 1h9v3H22v2h-2.03l-.5 17H4.53l-.5-17H2V4h5.5V1zm2 3h5V3h-5v1zM6.03 6l.44 15h11.06l.44-15H6.03zM13 8v11h-2V8h2z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </div>
+              <p
+                class="t-upload__card-name t-upload__flow-status"
+              >
+                <!---->
+                loading.svg
+              </p>
+            </li>
+            <li
+              class="t-upload__card-item"
+            >
+              <div
+                class="t-upload__card-content t-is-bordered"
+              >
+                <div
+                  class="t-upload__card-status-wrap t-upload__image-flow-fail"
+                >
+                  <svg
+                    class="t-icon t-icon-error-circle-filled"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <p>
+                    上传失败
+                    
+                  </p>
+                </div>
+                <!---->
+                <div
+                  class="t-upload__card-mask"
+                >
+                  <!---->
+                  <span
+                    class="t-upload__card-mask-item t-upload__delete"
+                  >
+                    <svg
+                      class="t-icon t-icon-delete"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M7.5 1h9v3H22v2h-2.03l-.5 17H4.53l-.5-17H2V4h5.5V1zm2 3h5V3h-5v1zM6.03 6l.44 15h11.06l.44-15H6.03zM13 8v11h-2V8h2z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </div>
+              <p
+                class="t-upload__card-name t-upload__flow-status"
+              >
+                <!---->
+                loading.svg
+              </p>
+            </li>
+            
+          </ul>
+        </div>
+        <!---->
+        <!---->
+        
+        <!---->
+        <!--teleport start-->
+        <!--teleport end-->
+        
+      </div>
+      <!---->
+      <!---->
+      
+    </div>
+  </div>
+  <!---->
+  
+  
 </div>
 `;
 
diff --git a/test/unit/snap/__snapshots__/ssr.test.js.snap b/test/unit/snap/__snapshots__/ssr.test.js.snap
index 206af584bc..c309def15a 100644
--- a/test/unit/snap/__snapshots__/ssr.test.js.snap
+++ b/test/unit/snap/__snapshots__/ssr.test.js.snap
@@ -1385,9 +1385,9 @@ exports[`ssr snapshot test > ssr test ./src/upload/_example/draggable.vue 1`] =
 
 exports[`ssr snapshot test > ssr test ./src/upload/_example/file-flow-list.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->禁用状态<!--]--></span><!--]--></label></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->自动上传<!--]--></span><!--]--></label></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[-->显示文件缩略图<!--]--></span><!--]--></label></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--> 允许上传同名文件 <!--]--></span><!--]--></label></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--> 整体替换上传 <!--]--></span><!--]--></label></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--> 多个文件一个请求上传 <!--]--></span><!--]--></label></div><!----><!--]--><!--]--></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><br></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" multiple accept hidden><!----><!----><!----><div class=\\"t-upload__flow t-upload__flow-file-flow\\"><div class=\\"t-upload__flow-op\\"><!--[--><div class=\\"t-upload__trigger\\"><button class=\\"t-button t-button--variant-outline t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\"><!--[-->选择文件<!--]--></span><!--]--></button></div><!--]--><small class=\\"t-upload__flow-placeholder t-upload__placeholder\\">支持批量上传文件，文件格式不限，最多只能上传 10 份文件</small></div><!----><div class=\\"t-upload__flow-card-area\\"><div class=\\"t-upload__flow-empty\\">点击上方“选择文件”或将文件拖拽到此区域</div></div><div class=\\"t-upload__flow-bottom\\"><button class=\\"t-button t-button--variant-base t-button--theme-default t-is-disabled t-upload__cancel\\" type=\\"button\\" disabled href><span class=\\"t-button__text\\">取消上传</span></button><button class=\\"t-button t-button--variant-base t-button--theme-primary t-is-disabled t-upload__continue\\" type=\\"button\\" disabled href><span class=\\"t-button__text\\">点击上传</span></button></div><!--[--><!----><!--teleport start--><!--teleport end--><!--]--></div><!----><!----></div></div><!----><!--]--><!--]--></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/upload/_example/image.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--> 禁用状态 <!--]--></span><!--]--></label></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--> 多个文件一个请求上传 <!--]--></span><!--]--></label></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox t-is-checked\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--> 自动上传 <!--]--></span><!--]--></label></div><!----><!--]--><!--]--></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><br></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" accept=\\"image/*\\" hidden><!----><!----><div><ul class=\\"t-upload__card\\"><!--[--><!--]--><li class=\\"t-upload__card-item t-is-background\\"><div class=\\"t-upload__image-add t-upload__card-container t-upload__card-box\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-add\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z\\"></path></svg><p class=\\"t-size-s\\">请选择图片</p></div></li></ul></div><!----><!----><small class=\\"t-upload__tips t-size-s\\">单张图片文件上传（上传成功状态演示）</small></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" accept=\\"image/*\\" hidden><!----><!----><div><ul class=\\"t-upload__card\\"><!--[--><!--]--><li class=\\"t-upload__card-item t-is-background\\"><div class=\\"t-upload__image-add t-upload__card-container t-upload__card-box\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-add\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z\\"></path></svg><p class=\\"t-size-s\\">点击上传图片</p></div></li></ul></div><!----><!----><small class=\\"t-upload__tips t-size-s\\">单张图片文件上传（上传失败状态演示）</small></div></div><!----><!--]--><!--]--></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" accept=\\"image/*\\" hidden><!----><!----><div><ul class=\\"t-upload__card\\"><!--[--><li class=\\"t-upload__card-item t-is-background\\"><!----><!----><div class=\\"t-upload__card-content t-upload__card-box\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square t-upload__card-image\\" fallback referrerpolicy=\\"strict-origin-when-cross-origin\\"><!----><!----><!----><img src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" class=\\"t-image t-image--fit-fill t-image--position-center\\" alt referrerpolicy=\\"strict-origin-when-cross-origin\\"><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><!----><!--]--><!--[--><div class=\\"t-space-item\\">图片加载中</div><!----><!--]--><!--]--></div></div><!----><!----></div><div class=\\"t-upload__card-mask\\"><span class=\\"t-upload__card-mask-item\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse\\" style=\\"\\"><g clipPath=\\"url(#clip0_8726_7319)\\"><path fill=\\"currentColor\\" d=\\"M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z\\"></path></g></svg><!--teleport start--><!--teleport end--><!--]--></span><!--[--><span class=\\"t-upload__card-mask-item-divider\\"></span><span class=\\"t-upload__card-mask-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-delete\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 1h9v3H22v2h-2.03l-.5 17H4.53l-.5-17H2V4h5.5V1zm2 3h5V3h-5v1zM6.03 6l.44 15h11.06l.44-15H6.03zM13 8v11h-2V8h2z\\"></path></svg></span><!--]--></div></div><a class=\\"t-link t-link--theme-default t-size-s t-link--hover-color t-upload__card-name\\" href=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" target=\\"_blank\\"><!----><!--[-->demo-image-1.png<!--]--><!----></a></li><!--]--><!----></ul></div><!----><!----><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" multiple accept=\\"image/*\\" hidden><!----><!----><div><ul class=\\"t-upload__card\\"><!--[--><!--]--><li class=\\"t-upload__card-item t-is-background\\"><div class=\\"t-upload__image-add t-upload__card-container t-upload__card-box\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-add\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z\\"></path></svg><p class=\\"t-size-s\\">点击上传图片</p></div></li></ul></div><!----><!----><small class=\\"t-upload__tips t-size-s\\">允许选择多张图片文件上传，最多只能上传 3 张图片</small></div></div><!----><!--]--><!--]--></div>"`;
+exports[`ssr snapshot test > ssr test ./src/upload/_example/image.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox t-is-checked\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--> 显示图片名称 <!--]--></span><!--]--></label></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--> 禁用状态 <!--]--></span><!--]--></label></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\"><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--> 多个文件一个请求上传 <!--]--></span><!--]--></label></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox t-is-checked\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--> 自动上传 <!--]--></span><!--]--></label></div><!----><!--]--><!--]--></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><br></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" accept=\\"image/*\\" hidden><!----><!----><div><ul class=\\"t-upload__card\\"><!--[--><!--]--><li class=\\"t-upload__card-item t-is-background\\"><div class=\\"t-upload__image-add t-upload__card-container t-upload__card-box\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-add\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z\\"></path></svg><p class=\\"t-size-s\\">请选择图片</p></div></li></ul></div><!----><!----><small class=\\"t-upload__tips t-size-s\\">单张图片文件上传（上传成功状态演示）</small></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" accept=\\"image/*\\" hidden><!----><!----><div><ul class=\\"t-upload__card\\"><!--[--><!--]--><li class=\\"t-upload__card-item t-is-background\\"><div class=\\"t-upload__image-add t-upload__card-container t-upload__card-box\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-add\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z\\"></path></svg><p class=\\"t-size-s\\">点击上传图片</p></div></li></ul></div><!----><!----><small class=\\"t-upload__tips t-size-s\\">单张图片文件上传（上传失败状态演示）</small></div></div><!----><!--]--><!--]--></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" accept=\\"image/*\\" hidden><!----><!----><div><ul class=\\"t-upload__card\\"><!--[--><li class=\\"t-upload__card-item t-is-background\\"><!----><!----><div class=\\"t-upload__card-content t-upload__card-box\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square t-upload__card-image\\" fallback referrerpolicy=\\"strict-origin-when-cross-origin\\"><!----><!----><!----><img src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" class=\\"t-image t-image--fit-fill t-image--position-center\\" alt referrerpolicy=\\"strict-origin-when-cross-origin\\"><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><!----><!--]--><!--[--><div class=\\"t-space-item\\">图片加载中</div><!----><!--]--><!--]--></div></div><!----><!----></div><div class=\\"t-upload__card-mask\\"><span class=\\"t-upload__card-mask-item\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse\\" style=\\"\\"><g clipPath=\\"url(#clip0_8726_7319)\\"><path fill=\\"currentColor\\" d=\\"M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z\\"></path></g></svg><!--teleport start--><!--teleport end--><!--]--></span><!--[--><span class=\\"t-upload__card-mask-item-divider\\"></span><span class=\\"t-upload__card-mask-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-delete\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 1h9v3H22v2h-2.03l-.5 17H4.53l-.5-17H2V4h5.5V1zm2 3h5V3h-5v1zM6.03 6l.44 15h11.06l.44-15H6.03zM13 8v11h-2V8h2z\\"></path></svg></span><!--]--></div></div><a class=\\"t-link t-link--theme-default t-size-s t-link--hover-color t-upload__card-name\\" href=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" target=\\"_blank\\"><!----><!--[-->demo-image-1.png<!--]--><!----></a></li><!--]--><!----></ul></div><!----><!----><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" multiple accept=\\"image/*\\" hidden><!----><!----><div><ul class=\\"t-upload__card\\"><!--[--><!--]--><li class=\\"t-upload__card-item t-is-background\\"><div class=\\"t-upload__image-add t-upload__card-container t-upload__card-box\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-add\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z\\"></path></svg><p class=\\"t-size-s\\">点击上传图片</p></div></li></ul></div><!----><!----><small class=\\"t-upload__tips t-size-s\\">允许选择多张图片文件上传，最多只能上传 3 张图片</small></div></div><!----><!--]--><!--]--></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/upload/_example/img-flow-list.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div> 是否自动上传： <div class=\\"t-switch t-size-m\\"><span class=\\"t-switch__handle\\"><!----></span><div class=\\"t-switch__content t-size-m\\"><!----></div></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><br></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" multiple accept=\\"image/*\\" hidden><!----><!----><!----><div class=\\"t-upload__flow t-upload__flow-image-flow\\"><div class=\\"t-upload__flow-op\\"><!--[--><div class=\\"t-upload__trigger\\"><button class=\\"t-button t-button--variant-outline t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\"><!--[-->继续选择<!--]--></span><!--]--></button></div><!--]--><small class=\\"t-upload__flow-placeholder t-upload__placeholder\\">支持批量上传图片文件</small></div><div class=\\"t-upload__flow-card-area\\"><ul class=\\"t-upload__card clearfix\\"><!--[--><li class=\\"t-upload__card-item\\"><div class=\\"t-upload__card-content t-is-bordered\\"><!----><div class=\\"t-image__wrapper t-image__wrapper--shape-square t-upload__card-image\\" fallback referrerpolicy=\\"strict-origin-when-cross-origin\\"><!----><!----><!----><img src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" class=\\"t-image t-image--fit-fill t-image--position-center\\" alt referrerpolicy=\\"strict-origin-when-cross-origin\\"><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><!----><!--]--><!--]--></div></div><!----><!----></div><div class=\\"t-upload__card-mask\\"><span class=\\"t-upload__card-mask-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse\\" style=\\"\\"><g clipPath=\\"url(#clip0_8726_7319)\\"><path fill=\\"currentColor\\" d=\\"M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z\\"></path></g></svg><span class=\\"t-upload__card-mask-item-divider\\"></span></span><span class=\\"t-upload__card-mask-item t-upload__delete\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-delete\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 1h9v3H22v2h-2.03l-.5 17H4.53l-.5-17H2V4h5.5V1zm2 3h5V3h-5v1zM6.03 6l.44 15h11.06l.44-15H6.03zM13 8v11h-2V8h2z\\"></path></svg></span></div></div><p class=\\"t-upload__card-name\\">loading.svg</p></li><!--]--></ul></div><!----><div class=\\"t-upload__flow-bottom\\"><button class=\\"t-button t-button--variant-base t-button--theme-default t-is-disabled t-upload__cancel\\" type=\\"button\\" disabled href><span class=\\"t-button__text\\">取消上传</span></button><button class=\\"t-button t-button--variant-base t-button--theme-primary t-upload__continue\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\">点击上传</span></button></div><!--[--><!----><!--teleport start--><!--teleport end--><!--]--></div><!----><!----></div></div><!----><!--]--><!--]--></div>"`;
+exports[`ssr snapshot test > ssr test ./src/upload/_example/img-flow-list.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-space t-space-horizontal\\" style=\\"gap:36px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div>AutoUpload: <div class=\\"t-switch t-size-m\\"><span class=\\"t-switch__handle\\"><!----></span><div class=\\"t-switch__content t-size-m\\"><!----></div></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox t-is-checked\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--> Show Image Name <!--]--></span><!--]--></label></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><label class=\\"t-checkbox t-is-checked\\" tabindex=\\"0\\"><!--[--><input type=\\"checkbox\\" tabindex=\\"-1\\" class=\\"t-checkbox__former\\" indeterminate=\\"false\\" checked><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\"><!--[--> Show UploadButton Or CancelUploadButton <!--]--></span><!--]--></label></div><!----><!--]--><!--]--></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><br></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" multiple accept=\\"image/*\\" hidden><!----><!----><!----><div class=\\"t-upload__flow t-upload__flow-image-flow\\"><div class=\\"t-upload__flow-op\\"><!--[--><div class=\\"t-upload__trigger\\"><button class=\\"t-button t-button--variant-outline t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\"><!--[-->继续选择<!--]--></span><!--]--></button></div><!--]--><small class=\\"t-upload__flow-placeholder t-upload__placeholder\\">支持批量上传图片文件</small></div><div class=\\"t-upload__flow-card-area\\"><ul class=\\"t-upload__card clearfix\\"><!--[--><li class=\\"t-upload__card-item\\"><div class=\\"t-upload__card-content t-is-bordered\\"><!----><div class=\\"t-image__wrapper t-image__wrapper--shape-square t-upload__card-image\\" fallback referrerpolicy=\\"strict-origin-when-cross-origin\\"><!----><!----><!----><img src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" class=\\"t-image t-image--fit-fill t-image--position-center\\" alt referrerpolicy=\\"strict-origin-when-cross-origin\\"><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><!----><!--]--><!--]--></div></div><!----><!----></div><div class=\\"t-upload__card-mask\\"><span class=\\"t-upload__card-mask-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse\\" style=\\"\\"><g clipPath=\\"url(#clip0_8726_7319)\\"><path fill=\\"currentColor\\" d=\\"M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z\\"></path></g></svg><span class=\\"t-upload__card-mask-item-divider\\"></span></span><span class=\\"t-upload__card-mask-item t-upload__delete\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-delete\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 1h9v3H22v2h-2.03l-.5 17H4.53l-.5-17H2V4h5.5V1zm2 3h5V3h-5v1zM6.03 6l.44 15h11.06l.44-15H6.03zM13 8v11h-2V8h2z\\"></path></svg></span></div></div><p class=\\"t-upload__card-name t-upload__flow-status\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg>loading.svg</p></li><!--]--></ul></div><!----><div class=\\"t-upload__flow-bottom\\"><button class=\\"t-button t-button--variant-base t-button--theme-default t-is-disabled t-upload__cancel\\" type=\\"button\\" disabled href><span class=\\"t-button__text\\">取消上传</span></button><button class=\\"t-button t-button--variant-base t-button--theme-primary t-upload__continue\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\">点击上传</span></button></div><!--[--><!----><!--teleport start--><!--teleport end--><!--]--></div><!----><!----></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><br></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-divider t-divider--horizontal t-divider--with-text t-divider--with-text-left\\"><span class=\\"t-divider__inner-text\\"><!--[-->Different Status Images<!--]--></span></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-upload static-image-list\\"><input type=\\"file\\" accept hidden><!----><!----><!----><div class=\\"t-upload__flow t-upload__flow-image-flow\\"><div class=\\"t-upload__flow-op\\"><!--[--><div class=\\"t-upload__trigger\\"><button class=\\"t-button t-button--variant-outline t-button--theme-default\\" type=\\"button\\" href tabindex=\\"0\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\"><!--[-->重新选择<!--]--></span><!--]--></button></div><!--]--></div><div class=\\"t-upload__flow-card-area\\"><ul class=\\"t-upload__card clearfix\\"><!--[--><li class=\\"t-upload__card-item\\"><div class=\\"t-upload__card-content t-is-bordered\\"><!----><div class=\\"t-image__wrapper t-image__wrapper--shape-square t-upload__card-image\\" fallback referrerpolicy=\\"strict-origin-when-cross-origin\\"><!----><!----><!----><img src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" class=\\"t-image t-image--fit-fill t-image--position-center\\" alt referrerpolicy=\\"strict-origin-when-cross-origin\\"><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><!----><!--]--><!--]--></div></div><!----><!----></div><div class=\\"t-upload__card-mask\\"><span class=\\"t-upload__card-mask-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse\\" style=\\"\\"><g clipPath=\\"url(#clip0_8726_7319)\\"><path fill=\\"currentColor\\" d=\\"M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z\\"></path></g></svg><span class=\\"t-upload__card-mask-item-divider\\"></span></span><span class=\\"t-upload__card-mask-item t-upload__delete\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-delete\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 1h9v3H22v2h-2.03l-.5 17H4.53l-.5-17H2V4h5.5V1zm2 3h5V3h-5v1zM6.03 6l.44 15h11.06l.44-15H6.03zM13 8v11h-2V8h2z\\"></path></svg></span></div></div><p class=\\"t-upload__card-name t-upload__flow-status\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg>loading.svg</p></li><li class=\\"t-upload__card-item\\"><div class=\\"t-upload__card-content\\"><!----><div class=\\"t-image__wrapper t-image__wrapper--shape-square t-upload__card-image\\" fallback referrerpolicy=\\"strict-origin-when-cross-origin\\"><!----><!----><!----><img src=\\"https://tdesign.gtimg.com/demo/demo-image-1.png\\" class=\\"t-image t-image--fit-fill t-image--position-center\\" alt referrerpolicy=\\"strict-origin-when-cross-origin\\"><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><!----><!--]--><!--]--></div></div><!----><!----></div><div class=\\"t-upload__card-mask\\"><span class=\\"t-upload__card-mask-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse\\" style=\\"\\"><g clipPath=\\"url(#clip0_8726_7319)\\"><path fill=\\"currentColor\\" d=\\"M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z\\"></path></g></svg><span class=\\"t-upload__card-mask-item-divider\\"></span></span><span class=\\"t-upload__card-mask-item t-upload__delete\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-delete\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 1h9v3H22v2h-2.03l-.5 17H4.53l-.5-17H2V4h5.5V1zm2 3h5V3h-5v1zM6.03 6l.44 15h11.06l.44-15H6.03zM13 8v11h-2V8h2z\\"></path></svg></span></div></div><p class=\\"t-upload__card-name t-upload__flow-status\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time-filled\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 110-22 11 11 0 010 22zm1-17.5h-2v6.91l4 4L16.41 15 13 11.59V5.5z\\"></path></svg>loading.svg</p></li><li class=\\"t-upload__card-item\\"><div class=\\"t-upload__card-content t-is-bordered\\"><div class=\\"t-upload__card-status-wrap t-upload__image-flow-progress\\"><div class=\\"t-loading--center t-size-m t-loading\\" style=\\"\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 12 12\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\" size=\\"medium\\"><foreignObject x=\\"0\\" y=\\"0\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg><!----></div><p>上传中 10%</p></div><!----><div class=\\"t-upload__card-mask\\"><!----><span class=\\"t-upload__card-mask-item t-upload__delete\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-delete\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 1h9v3H22v2h-2.03l-.5 17H4.53l-.5-17H2V4h5.5V1zm2 3h5V3h-5v1zM6.03 6l.44 15h11.06l.44-15H6.03zM13 8v11h-2V8h2z\\"></path></svg></span></div></div><p class=\\"t-upload__card-name t-upload__flow-status\\"><!---->loading.svg</p></li><li class=\\"t-upload__card-item\\"><div class=\\"t-upload__card-content t-is-bordered\\"><div class=\\"t-upload__card-status-wrap t-upload__image-flow-fail\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><p>上传失败</p></div><!----><div class=\\"t-upload__card-mask\\"><!----><span class=\\"t-upload__card-mask-item t-upload__delete\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-delete\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M7.5 1h9v3H22v2h-2.03l-.5 17H4.53l-.5-17H2V4h5.5V1zm2 3h5V3h-5v1zM6.03 6l.44 15h11.06l.44-15H6.03zM13 8v11h-2V8h2z\\"></path></svg></span></div></div><p class=\\"t-upload__card-name t-upload__flow-status\\"><!---->loading.svg</p></li><!--]--></ul></div><!----><!----><!--[--><!----><!--teleport start--><!--teleport end--><!--]--></div><!----><!----></div></div><!----><!--]--><!--]--></div>"`;
 
 exports[`ssr snapshot test > ssr test ./src/upload/_example/listType.vue 1`] = `"<section class=\\"tdesign-demo-upload\\" data-v-5232d1a7><header class=\\"tdesign-demo-upload-header\\" data-v-5232d1a7><div class=\\"t-upload\\" show-file-list=\\"true\\" data-v-5232d1a7><input type=\\"file\\" multiple accept hidden><div class=\\"t-upload__single t-upload__single-file\\"><!----><!--[--><div class=\\"t-upload__trigger\\"><!--[--><button class=\\"t-button t-button--variant-outline t-button--theme-default t-button--icon-only\\" type=\\"button\\" href tabindex=\\"0\\" data-v-5232d1a7><!--[--><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\" style=\\"\\" data-v-5232d1a7><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg>选择文件 <!--]--><!--]--></button><p class=\\"describe\\" data-v-5232d1a7>请上传txt文件，大小在60M以内</p><!--]--></div><!--]--><!--[--><!--]--><!----></div><!----><!----><!----><!----><!----></div></header></section>"`;
 

From 039524e6c79bda95652a6d115a3863cd4d2635fe Mon Sep 17 00:00:00 2001
From: chaishi <974383157@qq.com>
Date: Sun, 5 Nov 2023 20:17:43 +0800
Subject: [PATCH 10/11] feat(upload): update api docs

---
 src/_common                              | 2 +-
 src/upload/_example/file-flow-list.vue   | 8 ++++++++
 src/upload/props.ts                      | 2 +-
 src/upload/themes/multiple-flow-list.tsx | 2 +-
 src/upload/type.ts                       | 7 +++++--
 src/upload/upload.en-US.md               | 2 +-
 src/upload/upload.md                     | 2 +-
 7 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/_common b/src/_common
index a93f68dbfb..35fc9546a1 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit a93f68dbfb458bfca83bee1cd2216405209936d8
+Subproject commit 35fc9546a193fdf02a6c4e7391603b075830a2a1
diff --git a/src/upload/_example/file-flow-list.vue b/src/upload/_example/file-flow-list.vue
index 5191f9a3fa..57ffd117ca 100644
--- a/src/upload/_example/file-flow-list.vue
+++ b/src/upload/_example/file-flow-list.vue
@@ -25,6 +25,7 @@
       :allow-upload-duplicate-file="allowUploadDuplicateFile"
       :is-batch-upload="isBatchUpload"
       :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
+      :format-response="formatResponse"
     ></t-upload>
   </t-space>
 </template>
@@ -41,4 +42,11 @@ const showThumbnail = ref(false);
 const allowUploadDuplicateFile = ref(false);
 const isBatchUpload = ref(false);
 const uploadAllFilesInOneRequest = ref(false);
+
+const formatResponse = (res) => {
+  if (!res) {
+    return { status: 'fail', error: '上传失败，原因：文件过大或网络不通' };
+  }
+  return res;
+};
 </script>
diff --git a/src/upload/props.ts b/src/upload/props.ts
index b4c138b859..0fe9c59603 100644
--- a/src/upload/props.ts
+++ b/src/upload/props.ts
@@ -82,7 +82,7 @@ export default {
   formatRequest: {
     type: Function as PropType<TdUploadProps['formatRequest']>,
   },
-  /** 用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。<br/> 此函数的返回值 `error` 或 `response.error` 会作为错误文本提醒，如果存在会判定为本次上传失败。<br/> 此函数的返回值 `url` 或 `response.url` 会作为上传成功后的链接 */
+  /** 用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。<br/> 示例返回值：`{ error, url, status, files }` <br/> 此函数的返回值 `error` 会作为错误文本提醒，表示上传失败的原因，如果存在会判定为本次上传失败。<br/> 此函数的返回值 `url` 会作为单个文件上传成功后的链接。<br/> `files` 表示一个请求同时上传多个文件后的文件列表 */
   formatResponse: {
     type: Function as PropType<TdUploadProps['formatResponse']>,
   },
diff --git a/src/upload/themes/multiple-flow-list.tsx b/src/upload/themes/multiple-flow-list.tsx
index 109e09a91a..7574bfd915 100644
--- a/src/upload/themes/multiple-flow-list.tsx
+++ b/src/upload/themes/multiple-flow-list.tsx
@@ -196,7 +196,7 @@ export default defineComponent({
         <div class={`${uploadPrefix.value}__flow-status`}>
           {iconMap[file.status]}
           <span class={`${uploadPrefix.value}__${props.theme}-${file.status}`}>
-            {textMap[file.status]}
+            {file.response?.error ? file.response?.error || textMap[file.status] : textMap[file.status]}
             {props.showUploadProgress && file.status === 'progress' ? ` ${file.percent || 0}%` : ''}
           </span>
         </div>
diff --git a/src/upload/type.ts b/src/upload/type.ts
index 0154073278..6ba32db359 100644
--- a/src/upload/type.ts
+++ b/src/upload/type.ts
@@ -92,7 +92,7 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
    */
   formatRequest?: (requestData: { [key: string]: any }) => { [key: string]: any };
   /**
-   * 用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。<br/> 此函数的返回值 `error` 或 `response.error` 会作为错误文本提醒，如果存在会判定为本次上传失败。<br/> 此函数的返回值 `url` 或 `response.url` 会作为上传成功后的链接
+   * 用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。<br/> 示例返回值：`{ error, url, status, files }` <br/> 此函数的返回值 `error` 会作为错误文本提醒，表示上传失败的原因，如果存在会判定为本次上传失败。<br/> 此函数的返回值 `url` 会作为单个文件上传成功后的链接。<br/> `files` 表示一个请求同时上传多个文件后的文件列表
    */
   formatResponse?: (response: any, context: FormatResponseContext) => ResponseType;
   /**
@@ -360,7 +360,10 @@ export interface UploadFile extends PlainObject {
   url?: string;
 }
 
-export type ResponseType = { error?: string; url?: string } & Record<string, any>;
+export type ResponseType = { error?: string; url?: string; status?: 'fail' | 'success'; files?: UploadFile[] } & Record<
+  string,
+  any
+>;
 
 export interface FormatResponseContext {
   file: UploadFile;
diff --git a/src/upload/upload.en-US.md b/src/upload/upload.en-US.md
index 8a74c702ba..8498d15672 100644
--- a/src/upload/upload.en-US.md
+++ b/src/upload/upload.en-US.md
@@ -23,7 +23,7 @@ files | Array | [] | `v-model:files` is supported。Typescript：`Array<T>` | N
 defaultFiles | Array | [] | uncontrolled property。Typescript：`Array<T>` | N
 format | Function | - | to redefine  `UploadFile` data structure。Typescript：`(file: File) => UploadFile` | N
 formatRequest | Function | - | redefine request data。Typescript：`(requestData: { [key: string]: any }) => { [key: string]: any }` | N
-formatResponse | Function | - | redefine response data structure。Typescript：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string } & Record<string, any>` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
+formatResponse | Function | - | redefine response data structure。Typescript：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string; status?: 'fail' \| 'success'; files?: UploadFile[] } & Record<string, any>` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
 headers | Object | - | HTTP Request Header。Typescript：`{[key: string]: string}` | N
 imageViewerProps | Object | - | ImageViewer Component Props。Typescript：`ImageViewerProps`，[ImageViewer API Documents](./image-viewer?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
 inputAttributes | Object | - | add attributes to HTML element `input`。Typescript：`CSSProperties` | N
diff --git a/src/upload/upload.md b/src/upload/upload.md
index bf71981a9d..d87556a148 100644
--- a/src/upload/upload.md
+++ b/src/upload/upload.md
@@ -23,7 +23,7 @@ files | Array | [] | 已上传文件列表，同 `value`。TS 类型：`UploadFi
 defaultFiles | Array | [] | 已上传文件列表，同 `value`。TS 类型：`UploadFile`。非受控属性。TS 类型：`Array<T>` | N
 format | Function | - | 转换文件 `UploadFile` 的数据结构，可新增或修改 `UploadFile` 的属性，注意不能删除 `UploadFile` 属性。`action` 存在时有效。TS 类型：`(file: File) => UploadFile` | N
 formatRequest | Function | - | 用于新增或修改文件上传请求 参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`。<br/>一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。<br/>⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。<br/>可以使用 `name` 定义 `file` 字段的别名。<br/>也可以使用 `formatRequest` 自定义任意字段，如添加一个字段 `fileList` ，存储文件数组。TS 类型：`(requestData: { [key: string]: any }) => { [key: string]: any }` | N
-formatResponse | Function | - | 用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。<br/> 此函数的返回值 `error` 或 `response.error` 会作为错误文本提醒，如果存在会判定为本次上传失败。<br/> 此函数的返回值 `url` 或 `response.url` 会作为上传成功后的链接。TS 类型：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string } & Record<string, any>` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
+formatResponse | Function | - | 用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。<br/> 示例返回值：`{ error, url, status, files }` <br/> 此函数的返回值 `error` 会作为错误文本提醒，表示上传失败的原因，如果存在会判定为本次上传失败。<br/> 此函数的返回值 `url` 会作为单个文件上传成功后的链接。<br/> `files` 表示一个请求同时上传多个文件后的文件列表。TS 类型：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string; status?: 'fail' \| 'success'; files?: UploadFile[] } & Record<string, any>` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
 headers | Object | - | 设置上传的请求头部，`action` 存在时有效。TS 类型：`{[key: string]: string}` | N
 imageViewerProps | Object | - | 透传图片预览组件全部属性。TS 类型：`ImageViewerProps`，[ImageViewer API Documents](./image-viewer?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/upload/type.ts) | N
 inputAttributes | Object | - | 用于添加属性到 HTML 元素 `input`。TS 类型：`CSSProperties` | N

From 3665bcfe6f7531efec28fa41c1574514c04e980e Mon Sep 17 00:00:00 2001
From: chaishi <974383157@qq.com>
Date: Sun, 5 Nov 2023 20:28:30 +0800
Subject: [PATCH 11/11] feat(_common): update commmon

---
 src/_common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_common b/src/_common
index 35fc9546a1..56f3acdc7c 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 35fc9546a193fdf02a6c4e7391603b075830a2a1
+Subproject commit 56f3acdc7c44c2a1dde6c74deb68f6b952de1a7d