feat(upload): upload支持自定义封面图 (#2690)

feat #2594
Tencent · Apr 12, 2024 · e8b1e67 · e8b1e67
1 parent cb9900b
commit e8b1e67
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/src/upload/README.en-US.md b/src/upload/README.en-US.md
@@ -10,8 +10,8 @@ allow-upload-duplicate-file | Boolean | false | \- | N
 config | Object | - | Typescript：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array<SourceTypeValues>; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 disabled | Boolean | false | \- | N
 file-list-display | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
-files | Array | - | Typescript：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
-default-files | Array | undefined | uncontrolled property。Typescript：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
+files | Array | - | Typescript：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done'; thumb?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
+default-files | Array | undefined | uncontrolled property。Typescript：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done'; thumb?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 grid-config | Object | - | Typescript：`{column?: number;  width?: number; height?: number;}` | N
 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

diff --git a/src/upload/README.md b/src/upload/README.md
@@ -60,8 +60,8 @@ allow-upload-duplicate-file | Boolean | false | 【开发中】是否允许重
 config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)。TS 类型：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array<SourceTypeValues>; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 disabled | Boolean | false | 是否禁用组件| N
 file-list-display | Slot | - | 【开发中】用于完全自定义文件列表内容。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
-files | Array | - | 已上传文件列表。TS 类型：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
-default-files | Array | undefined | 已上传文件列表。非受控属性。TS 类型：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
+files | Array | - | 已上传文件列表。TS 类型：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done'; thumb?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
+default-files | Array | undefined | 已上传文件列表。非受控属性。TS 类型：`Array<UploadFile>` `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' \| 'video'; percent?: number; status: 'loading' \| 'reload' \| 'failed' \| 'done'; thumb?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
 grid-config | Object | - | upload组件每行上传图片列数以及图片的宽度和高度。TS 类型：`{column?: number;  width?: number; height?: number;}` | N
 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

diff --git a/src/upload/type.ts b/src/upload/type.ts
@@ -169,6 +169,7 @@ export interface UploadFile {
   type?: 'image' | 'video';
   percent?: number;
   status: 'loading' | 'reload' | 'failed' | 'done';
+  thumb?: string;
 }
 
 export type MediaType = 'image' | 'video';

diff --git a/src/upload/upload.wxml b/src/upload/upload.wxml
@@ -33,7 +33,7 @@
             data-index="{{index}}"
             t-class="{{classPrefix}}__thumbnail"
             style="{{imageProps && imageProps.style || ''}}"
-            src="{{file.url}}"
+            src="{{ file.thumb || file.url }}"
             mode="{{imageProps && imageProps.mode || 'aspectFill'}}"
             error="{{imageProps && imageProps.error || 'default'}}"
             lazy="{{imageProps && imageProps.lazy || false}}"
@@ -48,6 +48,7 @@
             wx:if="{{file.type === 'video'}}"
             class="{{classPrefix}}__thumbnail"
             src="{{file.url}}"
+            poster="{{ file.thumb }}"
             controls
             autoplay="{{false}}"
             objectFit="contain"
@@ -140,7 +141,7 @@
                 data-index="{{index}}"
                 t-class="{{classPrefix}}__thumbnail"
                 style="{{imageProps && imageProps.style || ''}}"
-                src="{{file.url}}"
+                src="{{ file.thumb || file.url }}"
                 mode="{{imageProps && imageProps.mode || 'aspectFill'}}"
                 error="{{imageProps && imageProps.error || 'default'}}"
                 lazy="{{imageProps && imageProps.lazy || false}}"
@@ -155,6 +156,7 @@
                 wx:if="{{file.type === 'video'}}"
                 class="{{classPrefix}}__thumbnail"
                 src="{{file.url}}"
+                poster="{{ file.thumb }}"
                 controls
                 autoplay="{{false}}"
                 objectFit="contain"