Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Upload): add preview props #477

Merged
merged 1 commit into from
Nov 19, 2024
Merged

feat(Upload): add preview props #477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified db/TDesign.db
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions packages/products/tdesign-miniprogram/src/upload/README.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ gutter | Number | 16 | \- | N
image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
max | Number | 0 | max count of files limit | N
media-type | Array | ['image', 'video'] | Typescript：`Array<MediaType>` `type MediaType = 'image' \| 'video'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
preview | 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/tree/develop/src/upload/type.ts) | N
source | String | media | options: media/messageFile | N
Expand Down
1 change: 1 addition & 0 deletions packages/products/tdesign-miniprogram/src/upload/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ gutter | Number | 16 | 预览窗格的 `gutter` 大小，单位 rpx | N
image-props | Object | - | 透传 Image 组件全部属性。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N
media-type | Array | ['image', 'video'] | 支持上传的文件类型，图片或视频。TS 类型：`Array<MediaType>` `type MediaType = 'image' \| 'video'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
preview | 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/tree/develop/src/upload/type.ts) | N
source | String | media | 来源。可选项：media/messageFile | N
Expand Down
5 changes: 5 additions & 0 deletions packages/products/tdesign-miniprogram/src/upload/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,11 @@ const props: TdUploadProps = {
type: Array,
value: ['image', 'video'],
},
/** 是否支持图片预览，文件没有预览 */
preview: {
type: Boolean,
value: true,
},
/** 自定义上传方法 */
requestMethod: {
type: null,
Expand Down
8 changes: 8 additions & 0 deletions packages/products/tdesign-miniprogram/src/upload/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,14 @@ export interface TdUploadProps {
type: ArrayConstructor;
value?: Array<MediaType>;
};
/**
* 是否支持图片预览，文件没有预览
* @default true
*/
preview?: {
type: BooleanConstructor;
value?: boolean;
};
/**
* 自定义上传方法
*/
Expand Down
1 change: 1 addition & 0 deletions packages/products/tdesign-mobile-react/src/upload/defaultProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const uploadDefaultProps: TdUploadProps = {
max: 0,
method: 'POST',
multiple: false,
preview: true,
useMockProgress: true,
withCredentials: false,
};
10 changes: 10 additions & 0 deletions packages/products/tdesign-mobile-react/src/upload/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,11 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
* 如果是自动上传模式 `autoUpload=true`，表示单个文件上传之前的钩子函数，若函数返回值为 `false` 则表示不上传当前文件。<br/>如果是非自动上传模式 `autoUpload=false`，函数返回值为 `false` 时表示从上传文件中剔除当前文件
*/
beforeUpload?: (file: UploadFile) => boolean | Promise<boolean>;
/**
* 图片选取模式，可选值为 camera (直接调起摄像头)
* @default ''
*/
capture?: string;
/**
* 非拖拽场景，指触发上传的元素，如：“选择文件”。如果是拖拽场景，则是指拖拽区域
*/
Expand Down Expand Up @@ -94,6 +99,11 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
* @default false
*/
multiple?: boolean;
/**
* 是否支持图片预览，文件没有预览
* @default true
*/
preview?: boolean;
/**
* 自定义上传方法。返回值 `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' }]}`
*/
Expand Down
2 changes: 2 additions & 0 deletions packages/products/tdesign-mobile-react/src/upload/upload.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ addContent | TNode | - | Typescript：`string \| TNode`。[see more ts definitio
allowUploadDuplicateFile | Boolean | false | allow to upload duplicate name files | N
autoUpload | Boolean | true | post upload request automatically after files being selected | N
beforeUpload | Function | - | stop one of files to upload。Typescript：`(file: UploadFile) => boolean \| Promise<boolean>` | N
capture | String | - | \- | 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<string, any> \| ((files: UploadFile[]) => Record<string, any>)` | N
disabled | Boolean | undefined | make upload to be disabled | N
Expand All @@ -27,6 +28,7 @@ imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./im
max | Number | 0 | max count of files limit | N
method | String | POST | HTTP request method。options: POST/GET/PUT/OPTIONS/PATCH/post/get/put/options/patch | N
multiple | Boolean | false | multiple files uploading | N
preview | Boolean | true | \- | 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-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
useMockProgress | Boolean | true | use mock progress, instead of real progress | N
Expand Down
2 changes: 2 additions & 0 deletions packages/products/tdesign-mobile-react/src/upload/upload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ addContent | TNode | - | 添加按钮内容。值为空，使用默认图标渲
allowUploadDuplicateFile | Boolean | false | 是否允许重复上传相同文件名的文件 | N
autoUpload | Boolean | true | 是否在选择文件后自动发起请求上传文件 | N
beforeUpload | Function | - | 如果是自动上传模式 `autoUpload=true`，表示单个文件上传之前的钩子函数，若函数返回值为 `false` 则表示不上传当前文件。<br/>如果是非自动上传模式 `autoUpload=false`，函数返回值为 `false` 时表示从上传文件中剔除当前文件。TS 类型：`(file: UploadFile) => boolean \| Promise<boolean>` | N
capture | String | - | 图片选取模式，可选值为 camera (直接调起摄像头) | N
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<string, any> \| ((files: UploadFile[]) => Record<string, any>)` | N
disabled | Boolean | undefined | 是否禁用组件 | N
Expand All @@ -27,6 +28,7 @@ imageProps | Object | - | 透传 Image 组件全部属性。TS 类型：`ImagePr
max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制。注意，单文件上传场景，请勿设置 `max` 属性 | N
method | String | POST | HTTP 请求类型。可选项：POST/GET/PUT/OPTIONS/PATCH/post/get/put/options/patch | N
multiple | Boolean | false | 支持多文件上传 | N
preview | Boolean | true | 是否支持图片预览，文件没有预览 | 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-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
useMockProgress | Boolean | true | 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传 | N
Expand Down
5 changes: 5 additions & 0 deletions packages/products/tdesign-mobile-vue/src/upload/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,11 @@ export default {
},
/** 支持多文件上传 */
multiple: Boolean,
/** 是否支持图片预览，文件没有预览 */
preview: {
type: Boolean,
default: true,
},
/** 自定义上传方法。返回值 `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: {
type: Function as PropType<TdUploadProps['requestMethod']>,
Expand Down
5 changes: 5 additions & 0 deletions packages/products/tdesign-mobile-vue/src/upload/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,11 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
* @default false
*/
multiple?: boolean;
/**
* 是否支持图片预览，文件没有预览
* @default true
*/
preview?: boolean;
/**
* 自定义上传方法。返回值 `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' }]}`
*/
Expand Down
1 change: 1 addition & 0 deletions packages/products/tdesign-mobile-vue/src/upload/upload.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./im
max | Number | 0 | max count of files limit | N
method | String | POST | HTTP request method。options: POST/GET/PUT/OPTIONS/PATCH/post/get/put/options/patch | N
multiple | Boolean | false | multiple files uploading | N
preview | Boolean | true | \- | 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-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
useMockProgress | Boolean | true | use mock progress, instead of real progress | N
Expand Down
1 change: 1 addition & 0 deletions packages/products/tdesign-mobile-vue/src/upload/upload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ imageProps | Object | - | 透传 Image 组件全部属性。TS 类型：`ImagePr
max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N
method | String | POST | HTTP 请求类型。可选项：POST/GET/PUT/OPTIONS/PATCH/post/get/put/options/patch | N
multiple | Boolean | false | 支持多文件上传 | N
preview | Boolean | true | 是否支持图片预览，文件没有预览 | 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-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
useMockProgress | Boolean | true | 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传 | N
Expand Down
41 changes: 41 additions & 0 deletions packages/scripts/api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136758,6 +136758,47 @@
"String"
]
},
{
"id": 1732013834,
"platform_framework": [
"8",
"16",
"64"
],
"component": "Upload",
"field_category": 1,
"field_name": "preview",
"field_type": [
"4"
],
"field_default_value": "true",
"field_enum": "",
"field_desc_zh": "是否支持图片预览，文件没有预览",
"field_desc_en": null,
"field_required": 0,
"event_input": "",
"create_time": "2024-11-19 10:57:14",
"update_time": "2024-11-19 10:57:14",
"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": "Props",
"platform_framework_text": [
"Vue(Mobile)",
"React(Mobile)",
"Miniprogram"
],
"field_type_text": [
"Boolean"
]
},
{
"id": 1675,
"platform_framework": [
Expand Down
Loading