From fb195e634e6ee097299d2284631b8dcae481910d Mon Sep 17 00:00:00 2001 From: Wesley <985189328@qq.com> Date: Fri, 12 Jun 2026 21:54:33 +0800 Subject: [PATCH] feat: api --- db/TDesign.db | Bin 1142784 -> 1142784 bytes .../tdesign-mobile-react/src/upload/type.ts | 95 +++++---------- .../src/upload/upload.en-US.md | 5 +- .../tdesign-mobile-react/src/upload/upload.md | 5 +- .../tdesign-mobile-vue/src/upload/props.ts | 6 + .../tdesign-mobile-vue/src/upload/type.ts | 93 +++++---------- .../src/upload/upload.en-US.md | 9 +- .../tdesign-mobile-vue/src/upload/upload.md | 9 +- packages/scripts/api.json | 111 +++++++++++++++++- 9 files changed, 193 insertions(+), 140 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index c8e7e6fdea6798547588bbbb3a225b1d8ac8edda..b84aa03b8ba930e0296c6041ec9444ce21ad8bd0 100644 GIT binary patch delta 699 zcmZp8;M(xOb%Hcw_e2?I)@}y9HqFMA))dCp6sFb`=GGLJ))dy(6t>nB_SO`R))dax z6t1l)+>7eDv=|t)SP%28<2*mnQA)X6v{g=qiBXbKl7pAG(a@Kp)zsLSfq|Ek!=jWBAR+LPao53SC{cbTgZ<0bSZs!>rV>r*)xNMOr$aS3Z zjJ&+g3>>^b*GVG+iK__eI*{Yi6O(dMS*Gv#%qy*nW|9%m`&fjM^7C_26Z5wJOBQ6} F0RXES)hhr1 delta 242 zcmV5Q_|j9vlJz837px4Gn=YO_vBl z3v#!tfD32=x57gUFaftsg9~;7htG)%htG)&htG)(htG))x6g?WHMRsh0=NK|9)b@n zw=_TyN&=U{LJ%^yutE@52?zRU+fWD()|X(951^N>Ob|Ags)`RDhXPFyw*pNO0uvq$ s1O5OHM-9geuM6M^HVKLgL<+?Qcm=`*B?O=Y{_U$zW@LL diff --git a/packages/products/tdesign-mobile-react/src/upload/type.ts b/packages/products/tdesign-mobile-react/src/upload/type.ts index 334bbdfe7..1420e146f 100644 --- a/packages/products/tdesign-mobile-react/src/upload/type.ts +++ b/packages/products/tdesign-mobile-react/src/upload/type.ts @@ -58,6 +58,10 @@ export interface TdUploadProps { * 是否禁用组件 */ disabled?: boolean; + /** + * 是否支持拖拽排序。 + */ + draggable?: boolean; /** * 已上传文件列表,同 `value`。TS 类型:`UploadFile` * @default [] @@ -83,7 +87,7 @@ export interface TdUploadProps { /** * 设置上传的请求头部,`action` 存在时有效 */ - headers?: { [key: string]: string }; + headers?: {[key: string]: string}; /** * 透传 Image 组件全部属性 */ @@ -143,7 +147,15 @@ export interface TdUploadProps { /** * 点击上传区域时触发 */ - onClickUpload?: (context: { e: MouseEvent }) => void; + onClickUpload?: (context: { e: MouseEvent }) => void; + /** + * 拖拽开始时触发,`context.file` 为拖拽文件 + */ + onDrag?: (context: { file: UploadFile, index: number }) => void => void; + /** + * 拖拽结束后触发,返回上传的文件列表(拖拽后的文件顺序) + */ + onDrop?: (value: Array) => void => void; /** * 上传失败后触发。`response` 指接口响应结果,`response.error` 会作为错误文本提醒。如果希望判定为上传失败,但接口响应数据不包含 `error` 字段,可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景,请到事件 `onOneFileFail` 中查看 `response` */ @@ -151,7 +163,7 @@ export interface TdUploadProps { /** * 点击图片预览时触发,文件没有预览 */ - onPreview?: (options: { file: UploadFile; index: number; e: MouseEvent }) => void; + onPreview?: (options: { file: UploadFile, index: number, e: MouseEvent }) => void; /** * 上传进度变化时触发,真实进度和模拟进度都会触发。
⚠️ 原始上传请求,小文件的上传进度只有 0 和 100,故而不会触发 `progress` 事件;只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度,保证 `useMockProgress=true` 的情况下,设置 `mockProgressDuration` 为更小的值。
参数 `options.type=real` 表示真实上传进度,`options.type=mock` 表示模拟上传进度 */ @@ -171,7 +183,7 @@ export interface TdUploadProps { /** * 文件上传校验结束事件,文件数量超出、文件大小超出限制、文件同名、`beforeAllFilesUpload` 返回值为假、`beforeUpload` 返回值为假等场景会触发。
注意:如果设置允许上传同名文件,即 `allowUploadDuplicateFile=true`,则不会因为文件重名触发该事件。
结合 `status` 和 `tips` 可以在组件中呈现不同类型的错误(或告警)提示 */ - onValidate?: (context: { type: UploadValidateType; files: UploadFile[] }) => void; + onValidate?: (context: { type: UploadValidateType, files: UploadFile[] }) => void; } export interface UploadFile extends PlainObject { @@ -204,7 +216,7 @@ export interface UploadFile extends PlainObject { * 文件上传状态:上传成功,上传失败,上传中,等待上传 * @default '' */ - status?: 'success' | 'fail' | 'progress' | 'waiting'; + status?: 'success' | 'fail' | 'progress' | 'waiting'; /** * 文件类型 * @default '' @@ -224,81 +236,30 @@ export interface UploadFile extends PlainObject { export type ResponseType = { error?: string; url?: string } & Record; -export interface FormatResponseContext { - file: UploadFile; - currentFiles?: UploadFile[]; -} +export interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }; -export interface RequestMethodResponse { - status: 'success' | 'fail'; - error?: string; - response: { url?: string; files?: UploadFile[]; [key: string]: any }; -} +export interface RequestMethodResponse { status: 'success' | 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }; -export interface SizeLimitObj { - size: number; - unit: SizeUnit; - message?: string; -} +export interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }; export type SizeUnitArray = ['B', 'KB', 'MB', 'GB']; export type SizeUnit = SizeUnitArray[number]; -export interface UploadChangeContext { - e?: MouseEvent | ProgressEvent; - response?: any; - trigger: UploadChangeTrigger; - index?: number; - file?: UploadFile; - files?: UploadFile[]; -} +export interface UploadChangeContext { e?: MouseEvent | ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }; -export type UploadChangeTrigger = 'add' | 'remove' | 'abort' | 'progress-success' | 'progress' | 'progress-fail'; +export type UploadChangeTrigger = 'add' | 'remove' | 'abort' | 'progress-success' | 'progress' | 'progress-fail' | 'sort'; -export interface UploadFailContext { - e?: ProgressEvent; - failedFiles: UploadFile[]; - currentFiles: UploadFile[]; - response?: any; - file: UploadFile; - XMLHttpRequest?: XMLHttpRequest; -} +export interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}; -export interface ProgressContext { - e?: ProgressEvent; - file?: UploadFile; - currentFiles: UploadFile[]; - percent: number; - type: UploadProgressType; - XMLHttpRequest?: XMLHttpRequest; -} +export interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }; export type UploadProgressType = 'real' | 'mock'; -export interface UploadRemoveContext { - index?: number; - file?: UploadFile; - e: MouseEvent; -} +export interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent }; -export interface UploadSelectChangeContext { - currentSelectedFiles: UploadFile[]; -} +export interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }; -export interface SuccessContext { - e?: ProgressEvent; - file?: UploadFile; - fileList?: UploadFile[]; - currentFiles?: UploadFile[]; - response?: any; - results?: SuccessContext[]; - XMLHttpRequest?: XMLHttpRequest; -} +export interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }; -export type UploadValidateType = - | 'FILE_OVER_SIZE_LIMIT' - | 'FILES_OVER_LENGTH_LIMIT' - | 'FILTER_FILE_SAME_NAME' - | 'BEFORE_ALL_FILES_UPLOAD' - | 'CUSTOM_BEFORE_UPLOAD'; +export type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' | 'FILES_OVER_LENGTH_LIMIT' | 'FILTER_FILE_SAME_NAME' | 'BEFORE_ALL_FILES_UPLOAD' | 'CUSTOM_BEFORE_UPLOAD'; 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 7fa76a32d..d94338963 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 @@ -19,6 +19,7 @@ capture | String / Boolean | - | \- | N children | TNode | - | to define upload trigger elements if `draggable=false`, to define drag elements if `draggable=true`。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N data | Object | - | extra request data of uploading. `formatRequest` can redefine all request data。Typescript: `Record \| ((files: UploadFile[]) => Record)` | N disabled | Boolean | undefined | make upload to be disabled | N +draggable | Boolean | - | Typescript: `boolean` | N files | Array | [] | Typescript: `Array` | N defaultFiles | Array | [] | uncontrolled property。Typescript: `Array` | N format | Function | - | to redefine `UploadFile` data structure。Typescript: `(file: File) => UploadFile` | N @@ -36,8 +37,10 @@ sizeLimit | Number / Object | - | files size limit。Typescript: `number \| Size 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 +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' \| 'sort'`
| N onClickUpload | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onDrag | Function | | Typescript: `(context: { file: UploadFile; index: number }) => void => void`
| N +onDrop | Function | | Typescript: `(value: Array) => void => void`
| N onFail | Function | | Typescript: `(options: UploadFailContext) => void`
`response.error` used for error tips, `formatResponse` can format `response`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。
`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`
| N onPreview | Function | | Typescript: `(options: { file: UploadFile; index: number; e: MouseEvent }) => void`
trigger on preview elements click | N onProgress | Function | | Typescript: `(options: ProgressContext) => void`
uploading request progress event。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。
`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`

`type UploadProgressType = 'real' \| 'mock'`
| N diff --git a/packages/products/tdesign-mobile-react/src/upload/upload.md b/packages/products/tdesign-mobile-react/src/upload/upload.md index b3fc89745..f4e09991f 100644 --- a/packages/products/tdesign-mobile-react/src/upload/upload.md +++ b/packages/products/tdesign-mobile-react/src/upload/upload.md @@ -19,6 +19,7 @@ capture | String / Boolean | - | 图片选取模式,可选值为 camera (直 children | TNode | - | 非拖拽场景,指触发上传的元素,如:“选择文件”。如果是拖拽场景,则是指拖拽区域。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N data | Object | - | 上传请求所需的额外字段,默认字段有 `file`,表示文件信息。可以添加额外的文件名字段,如:`{file_name: "custom-file-name.txt"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段。TS 类型:`Record \| ((files: UploadFile[]) => Record)` | N disabled | Boolean | undefined | 是否禁用组件 | N +draggable | Boolean | - | 是否支持拖拽排序。。TS 类型:`boolean` | N files | Array | [] | 已上传文件列表,同 `value`。TS 类型:`UploadFile`。TS 类型:`Array` | N defaultFiles | Array | [] | 已上传文件列表,同 `value`。TS 类型:`UploadFile`。非受控属性。TS 类型:`Array` | N format | Function | - | 转换文件 `UploadFile` 的数据结构,可新增或修改 `UploadFile` 的属性,注意不能删除 `UploadFile` 属性。`action` 存在时有效。TS 类型:`(file: File) => UploadFile` | N @@ -36,8 +37,10 @@ sizeLimit | Number / Object | - | 图片文件大小限制,默认单位 KB。 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 +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' \| 'sort'`
| N onClickUpload | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击上传区域时触发 | N +onDrag | Function | | TS 类型:`(context: { file: UploadFile; index: number }) => void => void`
拖拽开始时触发,`context.file` 为拖拽文件 | N +onDrop | Function | | TS 类型:`(value: Array) => void => void`
拖拽结束后触发,返回上传的文件列表(拖拽后的文件顺序) | N onFail | Function | | TS 类型:`(options: UploadFailContext) => void`
上传失败后触发。`response` 指接口响应结果,`response.error` 会作为错误文本提醒。如果希望判定为上传失败,但接口响应数据不包含 `error` 字段,可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景,请到事件 `onOneFileFail` 中查看 `response`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。
`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`
| N onPreview | Function | | TS 类型:`(options: { file: UploadFile; index: number; e: MouseEvent }) => void`
点击图片预览时触发,文件没有预览 | N onProgress | Function | | TS 类型:`(options: ProgressContext) => void`
上传进度变化时触发,真实进度和模拟进度都会触发。
⚠️ 原始上传请求,小文件的上传进度只有 0 和 100,故而不会触发 `progress` 事件;只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度,保证 `useMockProgress=true` 的情况下,设置 `mockProgressDuration` 为更小的值。
参数 `options.type=real` 表示真实上传进度,`options.type=mock` 表示模拟上传进度。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。
`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`

`type UploadProgressType = 'real' \| 'mock'`
| N diff --git a/packages/products/tdesign-mobile-vue/src/upload/props.ts b/packages/products/tdesign-mobile-vue/src/upload/props.ts index b34360aea..c3a453489 100644 --- a/packages/products/tdesign-mobile-vue/src/upload/props.ts +++ b/packages/products/tdesign-mobile-vue/src/upload/props.ts @@ -51,6 +51,8 @@ export default { type: Boolean, default: undefined, }, + /** 是否支持拖拽排序。 */ + draggable: Boolean, /** 已上传文件列表,同 `value`。TS 类型:`UploadFile` */ files: { type: Array as PropType, @@ -149,6 +151,10 @@ export default { onChange: Function as PropType, /** 点击上传区域时触发 */ onClickUpload: Function as PropType, + /** 拖拽开始时触发,`context.file` 为拖拽文件 */ + onDrag: Function as PropType, + /** 拖拽结束后触发,返回上传的文件列表(拖拽后的文件顺序) */ + onDrop: Function as PropType, /** 上传失败后触发。`response` 指接口响应结果,`response.error` 会作为错误文本提醒。如果希望判定为上传失败,但接口响应数据不包含 `error` 字段,可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景,请到事件 `onOneFileFail` 中查看 `response` */ onFail: Function as PropType, /** 点击图片预览时触发,文件没有预览 */ diff --git a/packages/products/tdesign-mobile-vue/src/upload/type.ts b/packages/products/tdesign-mobile-vue/src/upload/type.ts index 436429713..59ecc8a76 100644 --- a/packages/products/tdesign-mobile-vue/src/upload/type.ts +++ b/packages/products/tdesign-mobile-vue/src/upload/type.ts @@ -53,6 +53,10 @@ export interface TdUploadProps { * 是否禁用组件 */ disabled?: boolean; + /** + * 是否支持拖拽排序。 + */ + draggable?: boolean; /** * 已上传文件列表,同 `value`。TS 类型:`UploadFile` * @default [] @@ -78,7 +82,7 @@ export interface TdUploadProps { /** * 设置上传的请求头部,`action` 存在时有效 */ - headers?: { [key: string]: string }; + headers?: {[key: string]: string}; /** * 透传 Image 组件全部属性 */ @@ -154,6 +158,14 @@ export interface TdUploadProps { * 点击上传区域时触发 */ onClickUpload?: (context: { e: MouseEvent }) => void; + /** + * 拖拽开始时触发,`context.file` 为拖拽文件 + */ + onDrag?: (context: { file: UploadFile, index: number }) => void => void; + /** + * 拖拽结束后触发,返回上传的文件列表(拖拽后的文件顺序) + */ + onDrop?: (value: Array) => void => void; /** * 上传失败后触发。`response` 指接口响应结果,`response.error` 会作为错误文本提醒。如果希望判定为上传失败,但接口响应数据不包含 `error` 字段,可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景,请到事件 `onOneFileFail` 中查看 `response` */ @@ -161,7 +173,7 @@ export interface TdUploadProps { /** * 点击图片预览时触发,文件没有预览 */ - onPreview?: (options: { file: UploadFile; index: number; e: MouseEvent }) => void; + onPreview?: (options: { file: UploadFile, index: number, e: MouseEvent }) => void; /** * 上传进度变化时触发,真实进度和模拟进度都会触发。
⚠️ 原始上传请求,小文件的上传进度只有 0 和 100,故而不会触发 `progress` 事件;只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度,保证 `useMockProgress=true` 的情况下,设置 `mockProgressDuration` 为更小的值。
参数 `options.type=real` 表示真实上传进度,`options.type=mock` 表示模拟上传进度 */ @@ -181,7 +193,7 @@ export interface TdUploadProps { /** * 文件上传校验结束事件,文件数量超出、文件大小超出限制、文件同名、`beforeAllFilesUpload` 返回值为假、`beforeUpload` 返回值为假等场景会触发。
注意:如果设置允许上传同名文件,即 `allowUploadDuplicateFile=true`,则不会因为文件重名触发该事件。
结合 `status` 和 `tips` 可以在组件中呈现不同类型的错误(或告警)提示 */ - onValidate?: (context: { type: UploadValidateType; files: UploadFile[] }) => void; + onValidate?: (context: { type: UploadValidateType, files: UploadFile[] }) => void; } export interface UploadFile extends PlainObject { @@ -214,7 +226,7 @@ export interface UploadFile extends PlainObject { * 文件上传状态:上传成功,上传失败,上传中,等待上传 * @default '' */ - status?: 'success' | 'fail' | 'progress' | 'waiting'; + status?: 'success' | 'fail' | 'progress' | 'waiting'; /** * 文件类型 * @default '' @@ -234,81 +246,30 @@ export interface UploadFile extends PlainObject { export type ResponseType = { error?: string; url?: string } & Record; -export interface FormatResponseContext { - file: UploadFile; - currentFiles?: UploadFile[]; -} +export interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }; -export interface RequestMethodResponse { - status: 'success' | 'fail'; - error?: string; - response: { url?: string; files?: UploadFile[]; [key: string]: any }; -} +export interface RequestMethodResponse { status: 'success' | 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }; -export interface SizeLimitObj { - size: number; - unit: SizeUnit; - message?: string; -} +export interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }; export type SizeUnitArray = ['B', 'KB', 'MB', 'GB']; export type SizeUnit = SizeUnitArray[number]; -export interface UploadChangeContext { - e?: MouseEvent | ProgressEvent; - response?: any; - trigger: UploadChangeTrigger; - index?: number; - file?: UploadFile; - files?: UploadFile[]; -} +export interface UploadChangeContext { e?: MouseEvent | ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }; -export type UploadChangeTrigger = 'add' | 'remove' | 'abort' | 'progress-success' | 'progress' | 'progress-fail'; +export type UploadChangeTrigger = 'add' | 'remove' | 'abort' | 'progress-success' | 'progress' | 'progress-fail' | 'sort'; -export interface UploadFailContext { - e?: ProgressEvent; - failedFiles: UploadFile[]; - currentFiles: UploadFile[]; - response?: any; - file: UploadFile; - XMLHttpRequest?: XMLHttpRequest; -} +export interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}; -export interface ProgressContext { - e?: ProgressEvent; - file?: UploadFile; - currentFiles: UploadFile[]; - percent: number; - type: UploadProgressType; - XMLHttpRequest?: XMLHttpRequest; -} +export interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }; export type UploadProgressType = 'real' | 'mock'; -export interface UploadRemoveContext { - index?: number; - file?: UploadFile; - e: MouseEvent; -} +export interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent }; -export interface UploadSelectChangeContext { - currentSelectedFiles: UploadFile[]; -} +export interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }; -export interface SuccessContext { - e?: ProgressEvent; - file?: UploadFile; - fileList?: UploadFile[]; - currentFiles?: UploadFile[]; - response?: any; - results?: SuccessContext[]; - XMLHttpRequest?: XMLHttpRequest; -} +export interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }; -export type UploadValidateType = - | 'FILE_OVER_SIZE_LIMIT' - | 'FILES_OVER_LENGTH_LIMIT' - | 'FILTER_FILE_SAME_NAME' - | 'BEFORE_ALL_FILES_UPLOAD' - | 'CUSTOM_BEFORE_UPLOAD'; +export type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' | 'FILES_OVER_LENGTH_LIMIT' | 'FILTER_FILE_SAME_NAME' | 'BEFORE_ALL_FILES_UPLOAD' | 'CUSTOM_BEFORE_UPLOAD'; 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 be374e32b..b1a3ca3c1 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 @@ -16,6 +16,7 @@ beforeUpload | Function | - | stop one of files to upload。Typescript: `(file: capture | String / Boolean | - | \- | N data | Object | - | extra request data of uploading. `formatRequest` can redefine all request data。Typescript: `Record \| ((files: UploadFile[]) => Record)` | N disabled | Boolean | undefined | make upload to be disabled | N +draggable | Boolean | - | Typescript: `boolean` | N files | Array | [] | `v-model:files` is supported。Typescript: `Array` | N defaultFiles | Array | [] | uncontrolled property。Typescript: `Array` | N format | Function | - | to redefine `UploadFile` data structure。Typescript: `(file: File) => UploadFile` | N @@ -35,8 +36,10 @@ useMockProgress | Boolean | true | use mock progress, instead of real progress | value | Array | [] | file list。`v-model` and `v-model:value` is supported。Typescript: `Array` | N defaultValue | Array | [] | file list。uncontrolled property。Typescript: `Array` | 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-vue/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 +onChange | Function | | Typescript: `(value: Array, context: UploadChangeContext) => void`
trigger on uploaded files change。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/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' \| 'sort'`
| N onClickUpload | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onDrag | Function | | Typescript: `(context: { file: UploadFile; index: number }) => void => void`
| N +onDrop | Function | | Typescript: `(value: Array) => void => void`
| N onFail | Function | | Typescript: `(options: UploadFailContext) => void`
`response.error` used for error tips, `formatResponse` can format `response`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`
| N onPreview | Function | | Typescript: `(options: { file: UploadFile; index: number; e: MouseEvent }) => void`
trigger on preview elements click | N onProgress | Function | | Typescript: `(options: ProgressContext) => void`
uploading request progress event。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`

`type UploadProgressType = 'real' \| 'mock'`
| N @@ -49,8 +52,10 @@ onValidate | Function | | Typescript: `(context: { type: UploadValidateType, fi name | params | description -- | -- | -- -change | `(value: Array, context: UploadChangeContext)` | trigger on uploaded files change。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/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'`
+change | `(value: Array, context: UploadChangeContext)` | trigger on uploaded files change。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/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' \| 'sort'`
click-upload | `(context: { e: MouseEvent })` | \- +drag | `(context: { file: UploadFile; index: number }) => void` | \- +drop | `(value: Array) => void` | \- fail | `(options: UploadFailContext)` | `response.error` used for error tips, `formatResponse` can format `response`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`
preview | `(options: { file: UploadFile; index: number; e: MouseEvent })` | trigger on preview elements click progress | `(options: ProgressContext)` | uploading request progress event。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`

`type UploadProgressType = 'real' \| 'mock'`
diff --git a/packages/products/tdesign-mobile-vue/src/upload/upload.md b/packages/products/tdesign-mobile-vue/src/upload/upload.md index 64a04435b..2fdbf87d6 100644 --- a/packages/products/tdesign-mobile-vue/src/upload/upload.md +++ b/packages/products/tdesign-mobile-vue/src/upload/upload.md @@ -16,6 +16,7 @@ beforeUpload | Function | - | 如果是自动上传模式 `autoUpload=true`, capture | String / Boolean | - | 图片选取模式,可选值为 camera (直接调起摄像头) | N data | Object | - | 上传请求所需的额外字段,默认字段有 `file`,表示文件信息。可以添加额外的文件名字段,如:`{file_name: "custom-file-name.txt"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段。TS 类型:`Record \| ((files: UploadFile[]) => Record)` | N disabled | Boolean | undefined | 是否禁用组件 | N +draggable | Boolean | - | 是否支持拖拽排序。。TS 类型:`boolean` | N files | Array | [] | 已上传文件列表,同 `value`。TS 类型:`UploadFile`。支持语法糖 `v-model:files`。TS 类型:`Array` | N defaultFiles | Array | [] | 已上传文件列表,同 `value`。TS 类型:`UploadFile`。非受控属性。TS 类型:`Array` | N format | Function | - | 转换文件 `UploadFile` 的数据结构,可新增或修改 `UploadFile` 的属性,注意不能删除 `UploadFile` 属性。`action` 存在时有效。TS 类型:`(file: File) => UploadFile` | N @@ -35,8 +36,10 @@ useMockProgress | Boolean | true | 是否在请求时间超过 300ms 后显示 value | Array | [] | 已上传文件列表,同 `files`。TS 类型:`UploadFile`。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`Array` | N defaultValue | Array | [] | 已上传文件列表,同 `files`。TS 类型:`UploadFile`。非受控属性。TS 类型:`Array` | N withCredentials | Boolean | false | 上传请求时是否携带 cookie | N -onChange | Function | | TS 类型:`(value: Array, context: UploadChangeContext) => void`
已上传文件列表发生变化时触发,`trigger` 表示触发本次的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/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 +onChange | Function | | TS 类型:`(value: Array, context: UploadChangeContext) => void`
已上传文件列表发生变化时触发,`trigger` 表示触发本次的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/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' \| 'sort'`
| N onClickUpload | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击上传区域时触发 | N +onDrag | Function | | TS 类型:`(context: { file: UploadFile; index: number }) => void => void`
拖拽开始时触发,`context.file` 为拖拽文件 | N +onDrop | Function | | TS 类型:`(value: Array) => void => void`
拖拽结束后触发,返回上传的文件列表(拖拽后的文件顺序) | N onFail | Function | | TS 类型:`(options: UploadFailContext) => void`
上传失败后触发。`response` 指接口响应结果,`response.error` 会作为错误文本提醒。如果希望判定为上传失败,但接口响应数据不包含 `error` 字段,可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景,请到事件 `onOneFileFail` 中查看 `response`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`
| N onPreview | Function | | TS 类型:`(options: { file: UploadFile; index: number; e: MouseEvent }) => void`
点击图片预览时触发,文件没有预览 | N onProgress | Function | | TS 类型:`(options: ProgressContext) => void`
上传进度变化时触发,真实进度和模拟进度都会触发。
⚠️ 原始上传请求,小文件的上传进度只有 0 和 100,故而不会触发 `progress` 事件;只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度,保证 `useMockProgress=true` 的情况下,设置 `mockProgressDuration` 为更小的值。
参数 `options.type=real` 表示真实上传进度,`options.type=mock` 表示模拟上传进度。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`

`type UploadProgressType = 'real' \| 'mock'`
| N @@ -49,8 +52,10 @@ onValidate | Function | | TS 类型:`(context: { type: UploadValidateType, fi 名称 | 参数 | 描述 -- | -- | -- -change | `(value: Array, context: UploadChangeContext)` | 已上传文件列表发生变化时触发,`trigger` 表示触发本次的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/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'`
+change | `(value: Array, context: UploadChangeContext)` | 已上传文件列表发生变化时触发,`trigger` 表示触发本次的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/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' \| 'sort'`
click-upload | `(context: { e: MouseEvent })` | 点击上传区域时触发 +drag | `(context: { file: UploadFile; index: number }) => void` | 拖拽开始时触发,`context.file` 为拖拽文件 +drop | `(value: Array) => void` | 拖拽结束后触发,返回上传的文件列表(拖拽后的文件顺序) fail | `(options: UploadFailContext)` | 上传失败后触发。`response` 指接口响应结果,`response.error` 会作为错误文本提醒。如果希望判定为上传失败,但接口响应数据不包含 `error` 字段,可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景,请到事件 `onOneFileFail` 中查看 `response`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`
preview | `(options: { file: UploadFile; index: number; e: MouseEvent })` | 点击图片预览时触发,文件没有预览 progress | `(options: ProgressContext)` | 上传进度变化时触发,真实进度和模拟进度都会触发。
⚠️ 原始上传请求,小文件的上传进度只有 0 和 100,故而不会触发 `progress` 事件;只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度,保证 `useMockProgress=true` 的情况下,设置 `mockProgressDuration` 为更小的值。
参数 `options.type=real` 表示真实上传进度,`options.type=mock` 表示模拟上传进度。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。
`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`

`type UploadProgressType = 'real' \| 'mock'`
diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 39db6712b..32ed91f53 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -152535,6 +152535,45 @@ "Object" ] }, + { + "id": 1781271154, + "platform_framework": [ + "8", + "16" + ], + "component": "Upload", + "field_category": 1, + "field_name": "draggable", + "field_type": [ + "4" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "是否支持拖拽排序。", + "field_desc_en": null, + "field_required": 0, + "event_input": "", + "create_time": "2026-06-12 13:32:34", + "update_time": "2026-06-12 13:32:34", + "event_output": null, + "custom_field_type": "boolean", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(Mobile)", + "React(Mobile)" + ], + "field_type_text": [ + "Boolean" + ] + }, { "id": 2383, "platform_framework": [ @@ -154587,7 +154626,7 @@ "field_desc_zh": "已上传文件列表发生变化时触发,`trigger` 表示触发本次的来源", "field_desc_en": "trigger on uploaded files change", "field_required": 0, - "event_input": "(value: Array, context: UploadChangeContext)【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'】", + "event_input": "(value: Array, context: UploadChangeContext)【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' | 'sort'】", "create_time": "2021-02-18 15:22:12", "update_time": "2021-12-28 01:51:04", "event_output": null, @@ -154745,6 +154784,41 @@ ], "field_type_text": [] }, + { + "id": 1781271273, + "platform_framework": [ + "8", + "16" + ], + "component": "Upload", + "field_category": 2, + "field_name": "drag", + "field_type": [], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "拖拽开始时触发,`context.file` 为拖拽文件", + "field_desc_en": null, + "field_required": 0, + "event_input": "(context: { file: UploadFile; index: number }) => void", + "create_time": "2026-06-12 13:34:33", + "update_time": "2026-06-12 13:34:33", + "event_output": null, + "custom_field_type": null, + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Events", + "platform_framework_text": [ + "Vue(Mobile)", + "React(Mobile)" + ], + "field_type_text": [] + }, { "id": 1184, "platform_framework": [ @@ -154916,6 +154990,41 @@ ], "field_type_text": [] }, + { + "id": 1781271298, + "platform_framework": [ + "8", + "16" + ], + "component": "Upload", + "field_category": 2, + "field_name": "drop", + "field_type": [], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "拖拽结束后触发,返回上传的文件列表(拖拽后的文件顺序)", + "field_desc_en": null, + "field_required": 0, + "event_input": "(value: Array) => void", + "create_time": "2026-06-12 13:34:58", + "update_time": "2026-06-12 13:34:58", + "event_output": null, + "custom_field_type": null, + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Events", + "platform_framework_text": [ + "Vue(Mobile)", + "React(Mobile)" + ], + "field_type_text": [] + }, { "id": 892, "platform_framework": [