Skip to content

feat(upload): mobile api #898

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

Open
Wesley-0808 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(upload): mobile api #898

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.
95 changes: 28 additions & 67 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 @@ -58,6 +58,10 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
* 是否禁用组件
*/
disabled?: boolean;
/**
* 是否支持拖拽排序。
*/
draggable?: boolean;
/**
* 已上传文件列表，同 `value`。TS 类型：`UploadFile`
* @default []
Expand All @@ -83,7 +87,7 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
/**
* 设置上传的请求头部，`action` 存在时有效
*/
headers?: { [key: string]: string };
headers?: {[key: string]: string};
/**
* 透传 Image 组件全部属性
*/
Expand Down Expand Up @@ -143,15 +147,23 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
/**
* 点击上传区域时触发
*/
onClickUpload?: (context: { e: MouseEvent<HTMLElement> }) => void;
onClickUpload?: (context: { e: MouseEvent<HTMLElement> }) => void;
/**
* 拖拽开始时触发，`context.file` 为拖拽文件
*/
onDrag?: (context: { file: UploadFile, index: number }) => void => void;
/**
* 拖拽结束后触发，返回上传的文件列表（拖拽后的文件顺序）
*/
onDrop?: (value: Array<T>) => void => void;
/**
* 上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response`
*/
onFail?: (options: UploadFailContext) => void;
/**
* 点击图片预览时触发，文件没有预览
*/
onPreview?: (options: { file: UploadFile; index: number; e: MouseEvent<HTMLDivElement> }) => void;
onPreview?: (options: { file: UploadFile, index: number, e: MouseEvent<HTMLDivElement> }) => void;
/**
* 上传进度变化时触发，真实进度和模拟进度都会触发。<br/>⚠️ 原始上传请求，小文件的上传进度只有 0 和 100，故而不会触发 `progress` 事件；只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度，保证 `useMockProgress=true` 的情况下，设置 `mockProgressDuration` 为更小的值。<br/>参数 `options.type=real` 表示真实上传进度，`options.type=mock` 表示模拟上传进度
*/
Expand All @@ -171,7 +183,7 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
/**
* 文件上传校验结束事件，文件数量超出、文件大小超出限制、文件同名、`beforeAllFilesUpload` 返回值为假、`beforeUpload` 返回值为假等场景会触发。<br/>注意：如果设置允许上传同名文件，即 `allowUploadDuplicateFile=true`，则不会因为文件重名触发该事件。<br/>结合 `status` 和 `tips` 可以在组件中呈现不同类型的错误（或告警）提示
*/
onValidate?: (context: { type: UploadValidateType; files: UploadFile[] }) => void;
onValidate?: (context: { type: UploadValidateType, files: UploadFile[] }) => void;
}

export interface UploadFile extends PlainObject {
Expand Down Expand Up @@ -204,7 +216,7 @@ export interface UploadFile extends PlainObject {
* 文件上传状态：上传成功，上传失败，上传中，等待上传
* @default ''
*/
status?: 'success' | 'fail' | 'progress' | 'waiting';
status?: 'success' | 'fail' | 'progress' | 'waiting';
/**
* 文件类型
* @default ''
Expand All @@ -224,81 +236,30 @@ export interface UploadFile extends PlainObject {

export type ResponseType = { error?: string; url?: string } & Record<string, any>;

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<HTMLElement> | ProgressEvent;
response?: any;
trigger: UploadChangeTrigger;
index?: number;
file?: UploadFile;
files?: UploadFile[];
}
export interface UploadChangeContext { e?: MouseEvent<HTMLElement> | 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<HTMLElement>;
}
export interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent<HTMLElement> };

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';
5 changes: 4 additions & 1 deletion 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 @@ -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<string, any> \| ((files: UploadFile[]) => Record<string, any>)` | N
disabled | Boolean | undefined | make upload to be disabled | N
draggable | Boolean | - | Typescript: `boolean` | N
files | Array | [] | Typescript: `Array<T>` | N
defaultFiles | Array | [] | uncontrolled property。Typescript: `Array<T>` | N
format | Function | - | to redefine `UploadFile` data structure。Typescript: `(file: File) => UploadFile` | N
Expand All @@ -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<T>, context: UploadChangeContext) => void`<br/>trigger on uploaded files change。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadChangeContext { e?: MouseEvent \| ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }`<br/><br/>`type UploadChangeTrigger = 'add' \| 'remove' \| 'abort' \| 'progress-success' \| 'progress' \| 'progress-fail'`<br/> | N
onChange | Function | | Typescript: `(value: Array<T>, context: UploadChangeContext) => void`<br/>trigger on uploaded files change。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadChangeContext { e?: MouseEvent \| ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }`<br/><br/>`type UploadChangeTrigger = 'add' \| 'remove' \| 'abort' \| 'progress-success' \| 'progress' \| 'progress-fail' \| 'sort'`<br/> | N
onClickUpload | Function | | Typescript: `(context: { e: MouseEvent }) => void`<br/> | N
onDrag | Function | | Typescript: `(context: { file: UploadFile; index: number }) => void => void`<br/> | N
onDrop | Function | | Typescript: `(value: Array<T>) => void => void`<br/> | N
onFail | Function | | Typescript: `(options: UploadFailContext) => void`<br/>`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)。<br/>`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`<br/> | N
onPreview | Function | | Typescript: `(options: { file: UploadFile; index: number; e: MouseEvent }) => void`<br/>trigger on preview elements click | N
onProgress | Function | | Typescript: `(options: ProgressContext) => void`<br/>uploading request progress event。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`<br/><br/>`type UploadProgressType = 'real' \| 'mock'`<br/> | N
Expand Down
5 changes: 4 additions & 1 deletion 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 @@ -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<string, any> \| ((files: UploadFile[]) => Record<string, any>)` | N
disabled | Boolean | undefined | 是否禁用组件 | N
draggable | Boolean | - | 是否支持拖拽排序。。TS 类型：`boolean` | N
files | Array | [] | 已上传文件列表，同 `value`。TS 类型：`UploadFile`。TS 类型：`Array<T>` | N
defaultFiles | Array | [] | 已上传文件列表，同 `value`。TS 类型：`UploadFile`。非受控属性。TS 类型：`Array<T>` | N
format | Function | - | 转换文件 `UploadFile` 的数据结构，可新增或修改 `UploadFile` 的属性，注意不能删除 `UploadFile` 属性。`action` 存在时有效。TS 类型：`(file: File) => UploadFile` | N
Expand All @@ -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<T>, context: UploadChangeContext) => void`<br/>已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadChangeContext { e?: MouseEvent \| ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }`<br/><br/>`type UploadChangeTrigger = 'add' \| 'remove' \| 'abort' \| 'progress-success' \| 'progress' \| 'progress-fail'`<br/> | N
onChange | Function | | TS 类型：`(value: Array<T>, context: UploadChangeContext) => void`<br/>已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadChangeContext { e?: MouseEvent \| ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }`<br/><br/>`type UploadChangeTrigger = 'add' \| 'remove' \| 'abort' \| 'progress-success' \| 'progress' \| 'progress-fail' \| 'sort'`<br/> | N
onClickUpload | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击上传区域时触发 | N
onDrag | Function | | TS 类型：`(context: { file: UploadFile; index: number }) => void => void`<br/>拖拽开始时触发，`context.file` 为拖拽文件 | N
onDrop | Function | | TS 类型：`(value: Array<T>) => void => void`<br/>拖拽结束后触发，返回上传的文件列表（拖拽后的文件顺序） | N
onFail | Function | | TS 类型：`(options: UploadFailContext) => void`<br/>上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`<br/> | N
onPreview | Function | | TS 类型：`(options: { file: UploadFile; index: number; e: MouseEvent }) => void`<br/>点击图片预览时触发，文件没有预览 | N
onProgress | Function | | TS 类型：`(options: ProgressContext) => void`<br/>上传进度变化时触发，真实进度和模拟进度都会触发。<br/>⚠️ 原始上传请求，小文件的上传进度只有 0 和 100，故而不会触发 `progress` 事件；只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度，保证 `useMockProgress=true` 的情况下，设置 `mockProgressDuration` 为更小的值。<br/>参数 `options.type=real` 表示真实上传进度，`options.type=mock` 表示模拟上传进度。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`<br/><br/>`type UploadProgressType = 'real' \| 'mock'`<br/> | N
Expand Down
6 changes: 6 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 @@ -51,6 +51,8 @@ export default {
type: Boolean,
default: undefined,
},
/** 是否支持拖拽排序。 */
draggable: Boolean,
/** 已上传文件列表，同 `value`。TS 类型：`UploadFile` */
files: {
type: Array as PropType<TdUploadProps['files']>,
Expand Down Expand Up @@ -149,6 +151,10 @@ export default {
onChange: Function as PropType<TdUploadProps['onChange']>,
/** 点击上传区域时触发 */
onClickUpload: Function as PropType<TdUploadProps['onClickUpload']>,
/** 拖拽开始时触发，`context.file` 为拖拽文件 */
onDrag: Function as PropType<TdUploadProps['onDrag']>,
/** 拖拽结束后触发，返回上传的文件列表（拖拽后的文件顺序） */
onDrop: Function as PropType<TdUploadProps['onDrop']>,
/** 上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response` */
onFail: Function as PropType<TdUploadProps['onFail']>,
/** 点击图片预览时触发，文件没有预览 */
Expand Down
Loading