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): support capture props #1644

Merged
merged 1 commit into from
Nov 19, 2024
Merged

feat(Upload): support capture props #1644

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
22 changes: 14 additions & 8 deletions src/upload/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default {
type: String,
default: '',
},
/** 添加按钮内容。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效。 */
/** 添加按钮内容。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效 */
addContent: {
type: [String, Function] as PropType<TdUploadProps['addContent']>,
},
Expand All @@ -37,12 +37,19 @@ export default {
beforeUpload: {
type: Function as PropType<TdUploadProps['beforeUpload']>,
},
/** 图片选取模式，可选值为 camera (直接调起摄像头) */
capture: {
type: String,
},
/** 上传请求所需的额外字段，默认字段有 `file`，表示文件信息。可以添加额外的文件名字段，如：`{file_name: "custom-file-name.txt"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段 */
data: {
type: Object as PropType<TdUploadProps['data']>,
},
/** 是否禁用 */
disabled: Boolean,
/** 是否禁用组件 */
disabled: {
type: Boolean,
default: undefined,
},
/** 用于完全自定义文件列表界面内容(UI)，单文件和多文件均有效 */
fileListDisplay: {
type: Function as PropType<TdUploadProps['fileListDisplay']>,
Expand All @@ -61,7 +68,7 @@ export default {
format: {
type: Function as PropType<TdUploadProps['format']>,
},
/** 用于新增或修改文件上传请求参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`；<br/>一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。<br/>⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。<br/>可以使用 `name` 定义 `file` 字段的别名，也可以使用 `formatRequest` 自定义任意字段 */
/** 用于新增或修改文件上传请求 参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`。<br/>一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。<br/>⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。<br/>可以使用 `name` 定义 `file` 字段的别名。<br/>也可以使用 `formatRequest` 自定义任意字段，如添加一个字段 `fileList` ，存储文件数组 */
formatRequest: {
type: Function as PropType<TdUploadProps['formatRequest']>,
},
Expand Down Expand Up @@ -112,8 +119,7 @@ export default {
sizeLimit: {
type: [Number, Object] as PropType<TdUploadProps['sizeLimit']>,
},

/** 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传。 */
/** 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传 */
useMockProgress: {
type: Boolean,
default: true,
Expand All @@ -140,6 +146,8 @@ export default {
onCancelUpload: Function as PropType<TdUploadProps['onCancelUpload']>,
/** 已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源 */
onChange: Function as PropType<TdUploadProps['onChange']>,
/** 点击上传区域时触发 */
onClickUpload: Function as PropType<TdUploadProps['onClickUpload']>,
/** 上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response` */
onFail: Function as PropType<TdUploadProps['onFail']>,
/** 多文件/图片场景下，单个文件上传失败后触发，如果一个请求上传一个文件，则会触发多次。单文件/图片不会触发 */
Expand All @@ -160,6 +168,4 @@ export default {
onValidate: Function as PropType<TdUploadProps['onValidate']>,
/** 待上传文件列表发生变化时触发。`context.files` 表示事件参数为待上传文件，`context.trigger` 引起此次变化的触发来源 */
onWaitingUploadFilesChange: Function as PropType<TdUploadProps['onWaitingUploadFilesChange']>,
/** 点击上传区域时触发。TS 类型：`(context: { e: MouseEvent })` */
onClickUpload: Function as PropType<TdUploadProps['onClickUpload']>,
};
23 changes: 14 additions & 9 deletions src/upload/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
*/
action?: string;
/**
* 添加按钮内容。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效。
* 添加按钮内容。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效
*/
addContent?: string | TNode;
/**
Expand All @@ -40,12 +40,17 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
*/
beforeAllFilesUpload?: (file: UploadFile[]) => boolean | Promise<boolean>;
beforeUpload?: (file: UploadFile) => boolean | Promise<boolean>;
/**
* 图片选取模式，可选值为 camera (直接调起摄像头)
* @default ''
*/
capture?: string;
/**
* 上传请求所需的额外字段，默认字段有 `file`，表示文件信息。可以添加额外的文件名字段，如：`{file_name: "custom-file-name.txt"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段
*/
data?: Record<string, any> | ((files: UploadFile[]) => Record<string, any>);
/**
* 是否禁用
* 是否禁用组件
*/
disabled?: boolean;
/**
Expand All @@ -67,7 +72,7 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
*/
format?: (file: File) => UploadFile;
/**
* 用于新增或修改文件上传请求参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`；<br/>一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。<br/>⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。<br/>可以使用 `name` 定义 `file` 字段的别名，也可以使用 `formatRequest` 自定义任意字段
* 用于新增或修改文件上传请求 参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`。<br/>一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。<br/>⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。<br/>可以使用 `name` 定义 `file` 字段的别名。<br/>也可以使用 `formatRequest` 自定义任意字段，如添加一个字段 `fileList` ，存储文件数组
*/
formatRequest?: (requestData: { [key: string]: any }) => { [key: string]: any };
/**
Expand Down Expand Up @@ -120,7 +125,7 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
*/
sizeLimit?: number | SizeLimitObj;
/**
* 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传。
* 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传
* @default true
*/
useMockProgress?: boolean;
Expand Down Expand Up @@ -157,6 +162,10 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
* 已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源
*/
onChange?: (value: Array<T>, context: UploadChangeContext) => void;
/**
* 点击上传区域时触发
*/
onClickUpload?: (context: { e: MouseEvent }) => void;
/**
* 上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response`
*/
Expand Down Expand Up @@ -200,10 +209,6 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
files: Array<UploadFile>;
trigger: 'validate' | 'remove' | 'uploaded';
}) => void;
/**
* 点击上传区域时触发。TS 类型：`(context: { e: MouseEvent })`
*/
onClickUpload?: (context: { e: MouseEvent }) => void;
}

export interface UploadFile extends PlainObject {
Expand Down Expand Up @@ -309,7 +314,7 @@ export interface ProgressContext {
export type UploadProgressType = 'real' | 'mock';

export interface UploadRemoveContext {
index: number;
index?: number;
file?: UploadFile;
e: MouseEvent;
}
Expand Down
Loading
Loading