diff --git a/src/upload/__tests__/upload.test.tsx b/src/upload/__tests__/upload.test.tsx new file mode 100644 index 0000000000..5cd19b3f4d --- /dev/null +++ b/src/upload/__tests__/upload.test.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { render, vi, mockDelay } from '@test/utils'; +import Upload from '../upload'; + +const files = [ + { + url: 'https://tdesign.gtimg.com/demo/demo-image-1.png', + name: 'default.jpeg', + status: 'success', + }, +]; + +describe('upload 组件测试', () => { + afterEach(() => { + vi.restoreAllMocks(); + }); + + test('imageProps', async () => { + const { container } = render( + , + ); + + await mockDelay(); + expect(container).toBeInTheDocument(); + expect(container.querySelector('.tdesign')).toBeInTheDocument(); + }); +}); diff --git a/src/upload/themes/ImageCard.tsx b/src/upload/themes/ImageCard.tsx index 246add8742..220b7b8398 100644 --- a/src/upload/themes/ImageCard.tsx +++ b/src/upload/themes/ImageCard.tsx @@ -26,16 +26,28 @@ export interface ImageCardUploadProps extends CommonDisplayFileProps { cancelUpload?: (context: { e: MouseEvent; file: UploadFile }) => void; onPreview?: TdUploadProps['onPreview']; showImageFileName?: boolean; + imageProps?: TdUploadProps['imageProps']; } const ImageCard = (props: ImageCardUploadProps) => { - const { displayFiles, locale, classPrefix, multiple, max = 0, onRemove, disabled, fileListDisplay } = props; + const { + displayFiles, + locale, + classPrefix, + multiple, + max = 0, + onRemove, + disabled, + fileListDisplay, + imageProps = {}, + } = props; const { BrowseIcon, DeleteIcon, AddIcon, ErrorCircleFilledIcon } = useGlobalIcon({ AddIcon: TdAddIcon, BrowseIcon: TdBrowseIcon, DeleteIcon: TdDeleteIcon, ErrorCircleFilledIcon: TdErrorCircleFilledIcon, }); + const { className: ImageClassName, ...restImageProps } = imageProps; const showTrigger = React.useMemo(() => { if (multiple) { @@ -47,11 +59,10 @@ const ImageCard = (props: ImageCardUploadProps) => { const renderMainContent = (file: UploadFile, index: number) => (
e.stopPropagation()}> diff --git a/src/upload/type.ts b/src/upload/type.ts index ba1f35c4bd..158929e81e 100644 --- a/src/upload/type.ts +++ b/src/upload/type.ts @@ -9,6 +9,7 @@ import { UploadConfig } from '../config-provider/type'; import { ButtonProps } from '../button'; import { PlainObject, TNode, UploadDisplayDragEvents } from '../common'; import { CSSProperties, MouseEvent, DragEvent } from 'react'; +import { ImageProps } from '../image'; export interface TdUploadProps { /** @@ -100,6 +101,10 @@ export interface TdUploadProps { * 设置上传的请求头部,`action` 存在时有效 */ headers?: { [key: string]: string }; + /** + * 用于在上传图片场景下,透传属性配置至 Image 组件 + */ + imageProps?: ImageProps; /** * 透传图片预览组件全部属性 */ diff --git a/src/upload/upload.en-US.md b/src/upload/upload.en-US.md index 9242e0f84d..182d3d707c 100644 --- a/src/upload/upload.en-US.md +++ b/src/upload/upload.en-US.md @@ -27,6 +27,7 @@ format | Function | - | to redefine `UploadFile` data structure。Typescript: formatRequest | Function | - | redefine request data。Typescript:`(requestData: { [key: string]: any }) => { [key: string]: any }` | N formatResponse | Function | - | redefine response data structure。Typescript:`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string; status?: 'fail' \| 'success'; files?: UploadFile[] } & Record` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N headers | Object | - | HTTP Request Header。Typescript:`{[key: string]: string}` | N +imageProps | Object | - | \- | N imageViewerProps | Object | - | ImageViewer Component Props。Typescript:`ImageViewerProps`,[ImageViewer API Documents](./image-viewer?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N inputAttributes | Object | - | add attributes to HTML element `input`。Typescript:`CSSProperties` | N isBatchUpload | Boolean | false | make all files to be a whole package, files can only be replaced or deleted together, can not add more files | N diff --git a/src/upload/upload.md b/src/upload/upload.md index a429a16788..39c0d48fc8 100644 --- a/src/upload/upload.md +++ b/src/upload/upload.md @@ -27,6 +27,7 @@ format | Function | - | 转换文件 `UploadFile` 的数据结构,可新增或 formatRequest | Function | - | 用于新增或修改文件上传请求 参数。`action` 存在时有效。一个请求上传一个文件时,默认请求字段有 `file`。
一个请求上传多个文件时,默认字段有 `file[0]/file[1]/file[2]/.../length`,其中 `length` 表示本次上传的文件数量。
⚠️非常注意,此处的 `file[0]/file[1]` 仅仅是一个字段名,并非表示 `file` 是一个数组,接口获取字段时注意区分。
可以使用 `name` 定义 `file` 字段的别名。
也可以使用 `formatRequest` 自定义任意字段,如添加一个字段 `fileList` ,存储文件数组。TS 类型:`(requestData: { [key: string]: any }) => { [key: string]: any }` | N formatResponse | Function | - | 用于格式化文件上传后的接口响应数据,`response` 便是接口响应的原始数据。`action` 存在时有效。
示例返回值:`{ error, url, status, files }`
此函数的返回值 `error` 会作为错误文本提醒,表示上传失败的原因,如果存在会判定为本次上传失败。
此函数的返回值 `url` 会作为单个文件上传成功后的链接。
`files` 表示一个请求同时上传多个文件后的文件列表。TS 类型:`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string; status?: 'fail' \| 'success'; files?: UploadFile[] } & Record` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N headers | Object | - | 设置上传的请求头部,`action` 存在时有效。TS 类型:`{[key: string]: string}` | N +imageProps | Object | - | 用于在上传图片场景下,透传属性配置至 Image 组件 | N imageViewerProps | Object | - | 透传图片预览组件全部属性。TS 类型:`ImageViewerProps`,[ImageViewer API Documents](./image-viewer?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N inputAttributes | Object | - | 用于添加属性到 HTML 元素 `input`。TS 类型:`CSSProperties` | N isBatchUpload | Boolean | false | 多个文件是否作为一个独立文件包,整体替换,整体删除。不允许追加文件,只允许替换文件。`theme=file-flow` 时有效 | N diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx index 6d1062e3c0..80f7a8d61e 100644 --- a/src/upload/upload.tsx +++ b/src/upload/upload.tsx @@ -20,7 +20,7 @@ import useGlobalIcon from '../hooks/useGlobalIcon'; // const Upload = forwardRef((props: UploadProps, ref) => { function TdUpload(originalProps: UploadProps, ref: ForwardedRef) { const props = useDefaultProps>(originalProps, uploadDefaultProps); - const { theme } = props; + const { theme, imageProps } = props; const { locale, classPrefix, @@ -141,6 +141,7 @@ function TdUpload(originalProps: UploadProps< cancelUpload={cancelUpload} onPreview={props.onPreview} showImageFileName={props.showImageFileName} + imageProps={imageProps} /> );