From 8abdbf6e57bf25b7f18349bd82dbdc8673d742eb Mon Sep 17 00:00:00 2001 From: anlyyao Date: Tue, 12 May 2026 11:57:21 +0800 Subject: [PATCH] feat(Upload): add theme prop --- db/TDesign.db | Bin 1134592 -> 1134592 bytes .../components/upload/README.en-US.md | 7 +-- .../packages/components/upload/README.md | 7 +-- .../packages/components/upload/props.ts | 5 ++ .../packages/components/upload/type.ts | 14 ++++-- .../uniapp-components/upload/README.en-US.md | 1 + .../uniapp-components/upload/README.md | 1 + .../uniapp-components/upload/props.ts | 9 ++++ .../packages/uniapp-components/upload/type.ts | 5 ++ .../src/upload/defaultProps.ts | 1 + .../tdesign-mobile-react/src/upload/type.ts | 5 ++ .../src/upload/upload.en-US.md | 1 + .../tdesign-mobile-react/src/upload/upload.md | 1 + .../tdesign-mobile-vue/src/upload/props.ts | 9 ++++ .../tdesign-mobile-vue/src/upload/type.ts | 5 ++ .../src/upload/upload.en-US.md | 1 + .../tdesign-mobile-vue/src/upload/upload.md | 1 + packages/scripts/api.json | 43 ++++++++++++++++++ 18 files changed, 107 insertions(+), 9 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index 998642d7a1474c32316ca022c87a2b4a836a253c..29182de743eedcb99f519d0ba23af175a193e9a6 100644 GIT binary patch delta 480 zcmZoz;M%ajb%Hdb`a~ILM)k&o)&$1Z1g6#m=GFw3)&$np1h&=$_SOWB)&$Ph1g_Qu z?$!jJ)&$}N?JJxFu5vTV zO|SD4kYmeYT392fx_yzKK+;2IA%>pm>;{6$(+vt(V1DVPT9A{Um{O9Fnwy$ll$ip;`Z<}!CC_)aJlVbN<>J0) z3-&y2XnNK^;mN+)PuHyma-UA>dD=1k#ljU&b}V_my!Yvj=BFDQAS#UvjLdWmOmz*7 z6by_dtxOE9Oe|2uAVSj%zw(PRnoOTRQ$PYpC4AzOVl&n=P~xiHUTi4%m9@T6c#*0k VR+sbA!QoaCxE#Lyzqufz1OVwGvnc=o delta 220 zcmZoz;M%ajb%Hdb%0wAwMwP~d)&$1Z1g6#m=GFw3)&$np1h&=$_SOWB)&$Ph1g_Qu z?$!jJ)&$}j?JJxFu5vSK zOt143kYmg6WIDsYaQh-Zfux7bf{ew}*$o7hnV6q%R(#;jxV_j=@GC11CkHPFF9S#B zeI|W}>D(rQ`qMvbWMiM+@6RtkJ=;W(UtQD4z{pJ3z(m*3RKdX5%FxKl#2kyz_W$OB Gj1mA}^go&a diff --git a/packages/products/tdesign-miniprogram/packages/components/upload/README.en-US.md b/packages/products/tdesign-miniprogram/packages/components/upload/README.en-US.md index 8eea7e48b..e93e4cc47 100644 --- a/packages/products/tdesign-miniprogram/packages/components/upload/README.en-US.md +++ b/packages/products/tdesign-miniprogram/packages/components/upload/README.en-US.md @@ -11,7 +11,7 @@ custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on v add-btn | Boolean | true | \- | N add-content | String | - | \- | N allow-upload-duplicate-file | Boolean | false | `暂不支持`。allow to upload duplicate name files | N -config | Object | - | Typescript: `UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array; sourceType?: Array }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N +config | Object | - | Typescript: `UploadMpConfig` `type UploadMpConfig = UploadImageConfig \| UploadVideoConfig` `interface UploadImageConfig { count?: number; sizeType?: Array; sourceType?: Array }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface UploadVideoConfig { sourceType?: Array; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N disabled | Boolean | undefined | make upload to be disabled | N draggable | Boolean / Object | - | Typescript: `boolean \| {vibrate?: boolean; collisionVibrate?: boolean}` | N files | Array | - | Typescript: `Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N @@ -26,6 +26,7 @@ remove-btn | Boolean | true | \- | N request-method | Function | - | \- | N size-limit | 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-miniprogram/blob/develop/packages/components/upload/type.ts) | N source | String | media | options: media/messageFile | N +theme | String | grid | `1.14.1`。options: grid/list | N transition | Object | { backTransition: true, duration: 300, timingFunction: 'ease' } | Typescript: `Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N ### Upload Events @@ -35,11 +36,11 @@ name | params | description add | `(files: MediaContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`

`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`

`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
click | `(index: number; file: VideoContext \| ImageContext)` | \- complete | \- | \- -drop | `(files: MediaContext) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]; interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }; interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number}`
+drop | `(files: MediaContext) ` | \- fail | \- | \- remove | `(index: number; file: UploadFile)` | \- select-change | `(files: MediaContext[]; currentSelectedFiles: MediaContext[])` | \- -success | `(files: MediaContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`

`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`

`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
+success | `(files: MediaContext)` | \- ### Upload Slots diff --git a/packages/products/tdesign-miniprogram/packages/components/upload/README.md b/packages/products/tdesign-miniprogram/packages/components/upload/README.md index bfcf59640..708e39f1f 100644 --- a/packages/products/tdesign-miniprogram/packages/components/upload/README.md +++ b/packages/products/tdesign-miniprogram/packages/components/upload/README.md @@ -11,7 +11,7 @@ custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场 add-btn | Boolean | true | 添加按钮 | N add-content | String | - | 添加按钮内容 | N allow-upload-duplicate-file | Boolean | false | `暂不支持`。是否允许重复上传相同文件名的文件 | N -config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)。TS 类型：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array; sourceType?: Array }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N +config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)。TS 类型：`UploadMpConfig` `type UploadMpConfig = UploadImageConfig \| UploadVideoConfig` `interface UploadImageConfig { count?: number; sizeType?: Array; sourceType?: Array }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface UploadVideoConfig { sourceType?: Array; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N disabled | Boolean | undefined | 是否禁用组件 | N draggable | Boolean / Object | - | 是否支持拖拽排序。长按时是否振动，碰撞时是否振动。示例一：`true`。示例二：`{ vibrate: true, collisionVibrate: true }`。TS 类型：`boolean \| {vibrate?: boolean; collisionVibrate?: boolean}` | N files | Array | - | 已上传文件列表。TS 类型：`Array` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N @@ -26,6 +26,7 @@ remove-btn | Boolean | true | 移除按钮 | N request-method | Function | - | 自定义上传方法 | N size-limit | 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-miniprogram/blob/develop/packages/components/upload/type.ts) | N source | String | media | 来源。可选项：media/messageFile | N +theme | String | grid | `1.14.1`。组件风格。提供宫格和列表两种布局风格。可选项：grid/list | N transition | Object | { backTransition: true, duration: 300, timingFunction: 'ease' } | 拖拽位置移动时的过渡参数,`duration`单位为ms。TS 类型：`Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts) | N ### Upload Events @@ -35,11 +36,11 @@ transition | Object | { backTransition: true, duration: 300, timingFunction: 'ea add | `(files: MediaContext)` | 选择后触发，仅包含本次选择的照片；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`

`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`

`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
click | `(index: number; file: VideoContext \| ImageContext)` | 点击已选文件时触发；常用于重新上传 complete | \- | 上传成功或失败后触发 -drop | `(files: MediaContext) ` | 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size` 选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]; interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }; interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number}`
+drop | `(files: MediaContext) ` | 拖拽结束后触发，包含所有上传的文件（拖拽后的文件顺序）；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size` 选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述 fail | \- | 上传失败后触发 remove | `(index: number; file: UploadFile)` | 移除文件时触发 select-change | `(files: MediaContext[]; currentSelectedFiles: MediaContext[])` | 选择文件或图片之后，上传之前，触发该事件。
`files` 表示之前已经上传完成的文件列表。
`currentSelectedFiles` 表示本次上传选中的文件列表 -success | `(files: MediaContext)` | 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/upload/type.ts)。
`type MediaContext = VideoContext[] \| ImageContext[]`

`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`

`interface ImageContext { name: string; type: string; url: string; size: number; width: number; height: number; progress: number }`
+success | `(files: MediaContext)` | 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述 ### Upload Slots diff --git a/packages/products/tdesign-miniprogram/packages/components/upload/props.ts b/packages/products/tdesign-miniprogram/packages/components/upload/props.ts index 52c4541f5..8c5899741 100644 --- a/packages/products/tdesign-miniprogram/packages/components/upload/props.ts +++ b/packages/products/tdesign-miniprogram/packages/components/upload/props.ts @@ -88,6 +88,11 @@ const props: TdUploadProps = { type: String, value: 'media', }, + /** 组件风格。提供宫格和列表两种布局风格 */ + theme: { + type: String, + value: 'grid', + }, /** 拖拽位置移动时的过渡参数,`duration`单位为ms */ transition: { type: Object, diff --git a/packages/products/tdesign-miniprogram/packages/components/upload/type.ts b/packages/products/tdesign-miniprogram/packages/components/upload/type.ts index 3aa1c7f74..68f22ff4d 100644 --- a/packages/products/tdesign-miniprogram/packages/components/upload/type.ts +++ b/packages/products/tdesign-miniprogram/packages/components/upload/type.ts @@ -141,6 +141,14 @@ export interface TdUploadProps { type: StringConstructor; value?: 'media' | 'messageFile'; }; + /** + * 组件风格。提供宫格和列表两种布局风格 + * @default grid + */ + theme?: { + type: StringConstructor; + value?: 'grid' | 'list'; + }; /** * 拖拽位置移动时的过渡参数,`duration`单位为ms * @default { backTransition: true, duration: 300, timingFunction: 'ease' } @@ -151,9 +159,9 @@ export interface TdUploadProps { }; } -export type UploadMpConfig = ImageConfig | VideoConfig; +export type UploadMpConfig = UploadImageConfig | UploadVideoConfig; -export interface ImageConfig { +export interface UploadImageConfig { count?: number; sizeType?: Array; sourceType?: Array; @@ -163,7 +171,7 @@ export type SizeTypeValues = 'original' | 'compressed'; export type SourceTypeValues = 'album' | 'camera'; -export interface VideoConfig { +export interface UploadVideoConfig { sourceType?: Array; compressed?: boolean; maxDuration?: number; diff --git a/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/README.en-US.md b/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/README.en-US.md index 3699ff3b0..4ef4a8311 100644 --- a/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/README.en-US.md +++ b/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/README.en-US.md @@ -24,6 +24,7 @@ remove-btn | Boolean | true | \- | N request-method | Function | - | Typescript: `(files: UploadFile \| UploadFile[]) => Promise` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/upload/type.ts) | N size-limit | 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-miniprogram/blob/develop/packages/uniapp-components/upload/type.ts) | N source | String | media | options: media/messageFile | N +theme | String | grid | options: grid/list | N transition | Object | { backTransition: true, duration: 300, timingFunction: 'ease' } | Typescript: `Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/upload/type.ts) | N ### Upload Events diff --git a/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/README.md b/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/README.md index f6ef95996..e781e6ba0 100644 --- a/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/README.md +++ b/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/README.md @@ -24,6 +24,7 @@ remove-btn | Boolean | true | 移除按钮 | N request-method | Function | - | 自定义上传方法。TS 类型：`(files: UploadFile \| UploadFile[]) => Promise` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/upload/type.ts) | N size-limit | 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-miniprogram/blob/develop/packages/uniapp-components/upload/type.ts) | N source | String | media | 来源。可选项：media/messageFile | N +theme | String | grid | 组件风格。提供宫格和列表两种布局风格。可选项：grid/list | N transition | Object | { backTransition: true, duration: 300, timingFunction: 'ease' } | 拖拽位置移动时的过渡参数,`duration`单位为ms。TS 类型：`Transition` `interface Transition { backTransition?: boolean, duration?: number, timingFunction?: string }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/upload/type.ts) | N ### Upload Events diff --git a/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/props.ts b/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/props.ts index 2a960363f..976bb53a0 100644 --- a/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/props.ts +++ b/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/props.ts @@ -86,6 +86,15 @@ export default { return ['media', 'messageFile'].includes(val); }, }, + /** 组件风格。提供宫格和列表两种布局风格 */ + theme: { + type: String, + default: 'grid' as TdUploadProps['theme'], + validator(val: TdUploadProps['theme']): boolean { + if (!val) return true; + return ['grid', 'list'].includes(val); + }, + }, /** 拖拽位置移动时的过渡参数,`duration`单位为ms */ transition: { type: Object, diff --git a/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/type.ts b/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/type.ts index 56f9b02cb..7ec7005ff 100644 --- a/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/type.ts +++ b/packages/products/tdesign-miniprogram/packages/uniapp-components/upload/type.ts @@ -82,6 +82,11 @@ export interface TdUploadProps { * @default media */ source?: 'media' | 'messageFile'; + /** + * 组件风格。提供宫格和列表两种布局风格 + * @default grid + */ + theme?: 'grid' | 'list'; /** * 拖拽位置移动时的过渡参数,`duration`单位为ms * @default { backTransition: true, duration: 300, timingFunction: 'ease' } diff --git a/packages/products/tdesign-mobile-react/src/upload/defaultProps.ts b/packages/products/tdesign-mobile-react/src/upload/defaultProps.ts index 7f3735da4..40c39db09 100644 --- a/packages/products/tdesign-mobile-react/src/upload/defaultProps.ts +++ b/packages/products/tdesign-mobile-react/src/upload/defaultProps.ts @@ -15,6 +15,7 @@ export const uploadDefaultProps: TdUploadProps = { multiple: false, preview: true, removeBtn: true, + theme: 'grid', useMockProgress: true, withCredentials: false, }; diff --git a/packages/products/tdesign-mobile-react/src/upload/type.ts b/packages/products/tdesign-mobile-react/src/upload/type.ts index 475c71592..334bbdfe7 100644 --- a/packages/products/tdesign-mobile-react/src/upload/type.ts +++ b/packages/products/tdesign-mobile-react/src/upload/type.ts @@ -121,6 +121,11 @@ export interface TdUploadProps { * 图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }` */ sizeLimit?: number | SizeLimitObj; + /** + * 组件风格。提供宫格和列表两种布局风格 + * @default grid + */ + theme?: 'grid' | 'list'; /** * 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传 * @default true diff --git a/packages/products/tdesign-mobile-react/src/upload/upload.en-US.md b/packages/products/tdesign-mobile-react/src/upload/upload.en-US.md index 864359e6c..7fa76a32d 100644 --- a/packages/products/tdesign-mobile-react/src/upload/upload.en-US.md +++ b/packages/products/tdesign-mobile-react/src/upload/upload.en-US.md @@ -33,6 +33,7 @@ preview | Boolean | true | \- | N removeBtn | Boolean | true | \- | N requestMethod | Function | - | custom upload request method。Typescript: `(files: UploadFile \| UploadFile[]) => Promise` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts) | 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-mobile-react/tree/develop/src/upload/type.ts) | N +theme | String | grid | `0.23.0`。options: grid/list | N useMockProgress | Boolean | true | use mock progress, instead of real progress | N withCredentials | Boolean | false | uploading request with cookie | N onChange | Function | | Typescript: `(value: Array, context: UploadChangeContext) => void`
trigger on uploaded files change。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。
`interface UploadChangeContext { e?: MouseEvent \| ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }`

`type UploadChangeTrigger = 'add' \| 'remove' \| 'abort' \| 'progress-success' \| 'progress' \| 'progress-fail'`
| N diff --git a/packages/products/tdesign-mobile-react/src/upload/upload.md b/packages/products/tdesign-mobile-react/src/upload/upload.md index 4642d1d5c..b3fc89745 100644 --- a/packages/products/tdesign-mobile-react/src/upload/upload.md +++ b/packages/products/tdesign-mobile-react/src/upload/upload.md @@ -33,6 +33,7 @@ preview | Boolean | true | 是否支持图片预览，文件没有预览 | N removeBtn | Boolean | true | 移除按钮 | N requestMethod | Function | - | 自定义上传方法。返回值 `status` 表示上传成功或失败；`error` 或 `response.error` 表示上传失败的原因；
`response` 表示请求上传成功后的返回数据，`response.url` 表示上传成功后的图片/文件地址，`response.files` 表示一个请求上传多个文件/图片后的返回值。
示例一：`{ status: 'fail', error: '上传失败', response }`。
示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。
示例三：`{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}`。TS 类型：`(files: UploadFile \| UploadFile[]) => Promise` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts) | 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-mobile-react/tree/develop/src/upload/type.ts) | N +theme | String | grid | `0.23.0`。组件风格。提供宫格和列表两种布局风格。可选项：grid/list | N useMockProgress | Boolean | true | 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传 | N withCredentials | Boolean | false | 上传请求时是否携带 cookie | N onChange | Function | | TS 类型：`(value: Array, context: UploadChangeContext) => void`
已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。
`interface UploadChangeContext { e?: MouseEvent \| ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }`

`type UploadChangeTrigger = 'add' \| 'remove' \| 'abort' \| 'progress-success' \| 'progress' \| 'progress-fail'`
| N diff --git a/packages/products/tdesign-mobile-vue/src/upload/props.ts b/packages/products/tdesign-mobile-vue/src/upload/props.ts index de37b5b2b..b34360aea 100644 --- a/packages/products/tdesign-mobile-vue/src/upload/props.ts +++ b/packages/products/tdesign-mobile-vue/src/upload/props.ts @@ -115,6 +115,15 @@ export default { sizeLimit: { type: [Number, Object] as PropType, }, + /** 组件风格。提供宫格和列表两种布局风格 */ + theme: { + type: String as PropType, + default: 'grid' as TdUploadProps['theme'], + validator(val: TdUploadProps['theme']): boolean { + if (!val) return true; + return ['grid', 'list'].includes(val); + }, + }, /** 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传 */ useMockProgress: { type: Boolean, diff --git a/packages/products/tdesign-mobile-vue/src/upload/type.ts b/packages/products/tdesign-mobile-vue/src/upload/type.ts index a20b58314..436429713 100644 --- a/packages/products/tdesign-mobile-vue/src/upload/type.ts +++ b/packages/products/tdesign-mobile-vue/src/upload/type.ts @@ -116,6 +116,11 @@ export interface TdUploadProps { * 图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }` */ sizeLimit?: number | SizeLimitObj; + /** + * 组件风格。提供宫格和列表两种布局风格 + * @default grid + */ + theme?: 'grid' | 'list'; /** * 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传 * @default true diff --git a/packages/products/tdesign-mobile-vue/src/upload/upload.en-US.md b/packages/products/tdesign-mobile-vue/src/upload/upload.en-US.md index c41d01dae..be374e32b 100644 --- a/packages/products/tdesign-mobile-vue/src/upload/upload.en-US.md +++ b/packages/products/tdesign-mobile-vue/src/upload/upload.en-US.md @@ -30,6 +30,7 @@ preview | Boolean | true | `1.6.0` | N removeBtn | Boolean | true | `1.10.0` | N requestMethod | Function | - | custom upload request method。Typescript: `(files: UploadFile \| UploadFile[]) => Promise` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts) | 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-mobile-vue/tree/develop/src/upload/type.ts) | N +theme | String | grid | `1.14.1`。options: grid/list | 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` | N defaultValue | Array | [] | file list。uncontrolled property。Typescript: `Array` | N diff --git a/packages/products/tdesign-mobile-vue/src/upload/upload.md b/packages/products/tdesign-mobile-vue/src/upload/upload.md index d87e4a7f6..64a04435b 100644 --- a/packages/products/tdesign-mobile-vue/src/upload/upload.md +++ b/packages/products/tdesign-mobile-vue/src/upload/upload.md @@ -30,6 +30,7 @@ preview | Boolean | true | `1.6.0`。是否支持图片预览，文件没有预 removeBtn | Boolean | true | `1.10.0`。移除按钮 | N requestMethod | Function | - | 自定义上传方法。返回值 `status` 表示上传成功或失败；`error` 或 `response.error` 表示上传失败的原因；
`response` 表示请求上传成功后的返回数据，`response.url` 表示上传成功后的图片/文件地址，`response.files` 表示一个请求上传多个文件/图片后的返回值。
示例一：`{ status: 'fail', error: '上传失败', response }`。
示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。
示例三：`{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}`。TS 类型：`(files: UploadFile \| UploadFile[]) => Promise` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts) | 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-mobile-vue/tree/develop/src/upload/type.ts) | N +theme | String | grid | `1.14.1`。组件风格。提供宫格和列表两种布局风格。可选项：grid/list | N useMockProgress | Boolean | true | 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传 | N value | Array | [] | 已上传文件列表，同 `files`。TS 类型：`UploadFile`。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`Array` | N defaultValue | Array | [] | 已上传文件列表，同 `files`。TS 类型：`UploadFile`。非受控属性。TS 类型：`Array` | N diff --git a/packages/scripts/api.json b/packages/scripts/api.json index a1b47a6de..c7a7c2a3a 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -153317,6 +153317,49 @@ "String" ] }, + { + "id": 1778557308, + "platform_framework": [ + "8", + "16", + "64", + "128" + ], + "component": "Upload", + "field_category": 1, + "field_name": "theme", + "field_type": [ + "1" + ], + "field_default_value": "grid", + "field_enum": "grid/list", + "field_desc_zh": "组件风格。提供宫格和列表两种布局风格", + "field_desc_en": null, + "field_required": 0, + "event_input": "", + "create_time": "2026-05-12 03:41:48", + "update_time": "2026-05-12 03:41:48", + "event_output": null, + "custom_field_type": null, + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "{\n\"Miniprogram\": \"1.14.1\",\n\"Vue(Mobile)\": \"1.14.1\",\n\"React(Mobile)\": \"0.23.0\"\n}", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(Mobile)", + "React(Mobile)", + "Miniprogram", + "UniApp" + ], + "field_type_text": [ + "String" + ] + }, { "id": 1183, "platform_framework": [