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

Jump to bottom

Feat/upload image text #971

Merged
merged 8 commits into from
Jun 10, 2022
Merged

Feat/upload image text #971

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e0ce468
fix:progress-style
Isabella327 May 31, 2022
4150255
fix:progress-style-new
Isabella327 May 31, 2022
903fb9c
fix:progress-style-style
Isabella327 May 31, 2022
1e7e7cf
test(progress): update-snap
Isabella327 May 31, 2022
e33220d
feat(upload): [Upload]图片上传文案支持自定义
Isabella327 Jun 9, 2022
1eb2640
Merge branch 'develop' of github.com:Tencent/tdesign-vue into isb
uyarn Jun 10, 2022
bc12645
chore: fix ts
uyarn Jun 10, 2022
546dd79
chore: fix optional value
uyarn Jun 10, 2022
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
15 changes: 9 additions & 6 deletions examples/upload/upload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,18 @@ data | Object | - | 上传文件时所需的额外数据。TS 类型：`Record<s
default | String / Slot / Function | - | 触发上传的内容，同 trigger。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
disabled | Boolean | false | 是否禁用 | N
draggable | Boolean | false | 是否启用拖拽上传 | N
fileListDisplay | Slot / Function | - | 【开发中】用于完全自定义文件列表内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
fileListDisplay | Slot / Function | - | 用于完全自定义文件列表内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
files | Array | - | 已上传文件列表。支持语法糖 `v-model`。TS 类型：`Array<UploadFile>` | N
defaultFiles | Array | - | 已上传文件列表。非受控属性。TS 类型：`Array<UploadFile>` | N
format | Function | - | 文件上传前转换文件数据。TS 类型：`(file: File) => UploadFile` | N
formatResponse | Function | - | 用于格式化文件上传后的响应数据。error 用于显示错误提示，如果 error 值为真，组件会判定为上传失败；url 用于上传文件/图片地址。TS 类型：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string } & Record<string, any>` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts) | N
headers | Object | - | 设置上传的请求头部。TS 类型：`{[key: string]: string}` | N
isBatchUpload | Boolean | false | 文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件 | N
locale | Object | - | 上传组件文本语言配置，支持自定义配置组件中的全部文本。TS 类型：`UploadConfig` `import { UploadConfig } from '../config-provider/type'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts) | N
max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N
method | String | POST | HTTP 请求类型。可选项：POST/GET/PUT/OPTION/PATCH/post/get/put/option/patch | N
multiple | Boolean | false | 是否支持多选文件 | N
name | String | 'file' | 文件上传时的名称 | N
name | String | file | 文件上传时的名称 | N
placeholder | String | - | 占位符 | N
requestMethod | Function | - | 自定义上传方法。返回值 status 表示上传成功或失败，error 表示上传失败的原因，response 表示请求上传成功后的返回数据，response.url 表示上传成功后的图片地址。示例一：`{ status: 'fail', error: '上传失败', response }`。示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。TS 类型：`(files: UploadFile | UploadFile[]) => Promise<RequestMethodResponse>` `interface RequestMethodResponse { status: 'success' | 'fail'; error?: string; response: { url?: string; [key: string]: any } }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts) | N
showUploadProgress | Boolean | true | 是否显示上传进度 | N
Expand All @@ -43,7 +44,8 @@ withCredentials | Boolean | false | 上传请求时是否携带 cookie | N
onCancelUpload | Function | | TS 类型：`() => void`<br/>点击「取消上传」时触发 | N
onChange | Function | | TS 类型：`(value: Array<UploadFile>, context: UploadChangeContext) => void`<br/>已上传文件列表发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。<br/>`interface UploadChangeContext { e?: MouseEvent | ProgressEvent; response?: any; trigger: string; index?: number; file?: UploadFile }`<br/> | N
onDragenter | Function | | TS 类型：`(context: { e: DragEvent }) => void`<br/>进入拖拽区域时触发 | N
onDragleave | Function | | TS 类型：`(context: { e: DragEvent }) => void`<br/>拖拽结束时触发 | N
onDragleave | Function | | TS 类型：`(context: { e: DragEvent }) => void`<br/>离开拖拽区域时触发 | N
onDrop | Function | | TS 类型：`(context: { e: DragEvent }) => void`<br/>拖拽结束时触发 | N
onFail | Function | | TS 类型：`(options: { e: ProgressEvent; file: UploadFile }) => void`<br/>上传失败后触发 | N
onPreview | Function | | TS 类型：`(options: { file: UploadFile; e: MouseEvent }) => void`<br/>点击预览时触发 | N
onProgress | Function | | TS 类型：`(options: ProgressContext) => void`<br/>上传进度变化时触发，真实进度和模拟进度都会触发。type 值为 real 表示真实上传进度，type 值为 mock 表示模拟上传进度。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。<br/>`interface ProgressContext { e?: ProgressEvent; file: UploadFile; percent: number; type: UploadProgressType }`<br/><br/>`type UploadProgressType = 'real' | 'mock'`<br/> | N
Expand All @@ -55,10 +57,11 @@ onSuccess | Function | | TS 类型：`(context: SuccessContext) => void`<br/>

名称 | 参数 | 描述
-- | -- | --
cancel-upload | - | 点击「取消上传」时触发
cancel-upload | \- | 点击「取消上传」时触发
change | `(value: Array<UploadFile>, context: UploadChangeContext)` | 已上传文件列表发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。<br/>`interface UploadChangeContext { e?: MouseEvent | ProgressEvent; response?: any; trigger: string; index?: number; file?: UploadFile }`<br/>
dragenter | `(context: { e: DragEvent })` | 进入拖拽区域时触发
dragleave | `(context: { e: DragEvent })` | 拖拽结束时触发
dragleave | `(context: { e: DragEvent })` | 离开拖拽区域时触发
drop | `(context: { e: DragEvent })` | 拖拽结束时触发
fail | `(options: { e: ProgressEvent; file: UploadFile })` | 上传失败后触发
preview | `(options: { file: UploadFile; e: MouseEvent })` | 点击预览时触发
progress | `(options: ProgressContext)` | 上传进度变化时触发，真实进度和模拟进度都会触发。type 值为 real 表示真实上传进度，type 值为 mock 表示模拟上传进度。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。<br/>`interface ProgressContext { e?: ProgressEvent; file: UploadFile; percent: number; type: UploadProgressType }`<br/><br/>`type UploadProgressType = 'real' | 'mock'`<br/>
Expand All @@ -78,4 +81,4 @@ response | Object | - | 上传接口返回的数据 | N
size | Number | - | 文件大小 | N
status | String | - | 文件上传状态：上传成功，上传失败，上传中，等待上传。TS 类型：` 'success' | 'fail' | 'progress' | 'waiting'` | N
type | String | - | 文件类型 | N
url | String | - | 文件上传成功后的下载/访问地址 | N
url | String | - | 必需。文件上传成功后的下载/访问地址 | Y
5 changes: 4 additions & 1 deletion src/upload/image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload')).exte
multiple: Boolean,
max: Number,
disabled: Boolean,
locale: Object,
},

computed: {
Expand Down Expand Up @@ -103,7 +104,9 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload')).exte
) : (
<div class={`${uploadName}__card-container ${uploadName}__card-box`}>
<AddIcon></AddIcon>
<p class={`${prefix}-size-s`}>{this.global.triggerUploadText.image}</p>
<p class={`${prefix}-size-s`}>
{this.locale?.triggerUploadText?.image || this.global.triggerUploadText.image}
</p>
</div>
)}
</li>
Expand Down
12 changes: 9 additions & 3 deletions src/upload/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default {
disabled: Boolean,
/** 是否启用拖拽上传 */
draggable: Boolean,
/** 【开发中】用于完全自定义文件列表内容 */
/** 用于完全自定义文件列表内容 */
fileListDisplay: {
type: Function as PropType<TdUploadProps['fileListDisplay']>,
},
Expand All @@ -57,7 +57,7 @@ export default {
format: {
type: Function as PropType<TdUploadProps['format']>,
},
/** 用于格式化文件上传后的响应数据。error 用于显示错误提示，如果 error 值为真，组件会判定为上传失败；url 用于上传文件/图片地址。 */
/** 用于格式化文件上传后的响应数据。error 用于显示错误提示，如果 error 值为真，组件会判定为上传失败；url 用于上传文件/图片地址 */
formatResponse: {
type: Function as PropType<TdUploadProps['formatResponse']>,
},
Expand All @@ -67,6 +67,10 @@ export default {
},
/** 文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件 */
isBatchUpload: Boolean,
/** 上传组件文本语言配置，支持自定义配置组件中的全部文本 */
locale: {
type: Object as PropType<TdUploadProps['locale']>,
},
/** 用于控制文件上传数量，值为 0 则不限制 */
max: {
type: Number,
Expand Down Expand Up @@ -139,8 +143,10 @@ export default {
onChange: Function as PropType<TdUploadProps['onChange']>,
/** 进入拖拽区域时触发 */
onDragenter: Function as PropType<TdUploadProps['onDragenter']>,
/** 拖拽结束时触发 */
/** 离开拖拽区域时触发 */
onDragleave: Function as PropType<TdUploadProps['onDragleave']>,
/** 拖拽结束时触发 */
onDrop: Function as PropType<TdUploadProps['onDrop']>,
/** 上传失败后触发 */
onFail: Function as PropType<TdUploadProps['onFail']>,
/** 点击预览时触发 */
Expand Down
17 changes: 13 additions & 4 deletions src/upload/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */

import { UploadConfig } from '../config-provider/type';
import { TNode } from '../common';

export interface TdUploadProps {
Expand Down Expand Up @@ -50,7 +51,7 @@ export interface TdUploadProps {
*/
draggable?: boolean;
/**
* 【开发中】用于完全自定义文件列表内容
* 用于完全自定义文件列表内容
*/
fileListDisplay?: TNode;
/**
Expand All @@ -66,7 +67,7 @@ export interface TdUploadProps {
*/
format?: (file: File) => UploadFile;
/**
* 用于格式化文件上传后的响应数据。error 用于显示错误提示，如果 error 值为真，组件会判定为上传失败；url 用于上传文件/图片地址。
* 用于格式化文件上传后的响应数据。error 用于显示错误提示，如果 error 值为真，组件会判定为上传失败；url 用于上传文件/图片地址
*/
formatResponse?: (response: any, context: FormatResponseContext) => ResponseType;
/**
Expand All @@ -78,6 +79,10 @@ export interface TdUploadProps {
* @default false
*/
isBatchUpload?: boolean;
/**
* 上传组件文本语言配置，支持自定义配置组件中的全部文本
*/
locale?: UploadConfig;
/**
* 用于控制文件上传数量，值为 0 则不限制
* @default 0
Expand All @@ -95,7 +100,7 @@ export interface TdUploadProps {
multiple?: boolean;
/**
* 文件上传时的名称
* @default 'file'
* @default file
*/
name?: string;
/**
Expand Down Expand Up @@ -158,9 +163,13 @@ export interface TdUploadProps {
*/
onDragenter?: (context: { e: DragEvent }) => void;
/**
* 拖拽结束时触发
* 离开拖拽区域时触发
*/
onDragleave?: (context: { e: DragEvent }) => void;
/**
* 拖拽结束时触发
*/
onDrop?: (context: { e: DragEvent }) => void;
/**
* 上传失败后触发
*/
Expand Down
1 change: 1 addition & 0 deletions src/upload/upload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -666,6 +666,7 @@ export default mixins(getConfigReceiverMixins<Vue, UploadConfig>('upload')).exte
max={this.max}
onImgPreview={this.handlePreviewImg}
disabled={this.tDisabled}
locale={this.locale}
></ImageCard>
)}
{this.showUploadList && (
Expand Down