6.5 KiB
6.5 KiB
| title | description | spline | isComponent |
|---|---|---|---|
| Upload 上传 | 用于相册读取或拉起拍照的图片上传功能。 | form | true |
引入
全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。
"usingComponents": {
"t-upload": "tdesign-miniprogram/upload/upload",
}
代码演示
单选上传图片
{{ single }}
多选上传图片
{{ multiple }}
API
Upload Props
| 名称 | 类型 | 默认值 | 说明 | 必传 |
|---|---|---|---|---|
| add-content | String / Slot | - | 添加按钮内容。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效。 | N |
| allow-upload-duplicate-file | Boolean | false | 【开发中】是否允许重复上传相同文件名的文件 | N |
| config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。图片上传。视频上传。TS 类型：UploadMpConfig `type UploadMpConfig = ImageConfig |
VideoConfig interface ImageConfig { count?: number; sizeType?: Array; sourceType?: Array } type SizeTypeValues = 'original' |
| file-list-display | Slot | - | 【开发中】用于完全自定义文件列表内容 | N |
| files | Array | - | 已上传文件列表。TS 类型：Array<UploadFile> `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' |
'video'; percent?: number }`。详细类型定义 |
| default-files | Array | undefined | 已上传文件列表。非受控属性。TS 类型：Array<UploadFile> `interface UploadFile { url: string; name?: string; size?: number; type?: 'image' |
'video'; percent?: number }`。详细类型定义 |
| 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。详细类型定义 |
N |
| max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N |
| media-type | Array | ['image', 'video'] | 支持上传的文件类型，图片或视频。TS 类型：Array<MediaType> `type MediaType = 'image' |
'video'`。详细类型定义 |
| request-method | Function | - | 自定义上传方法 | N |
| size-limit | Number / Object | - | 图片文件大小限制，单位 KB。可选单位有：`'B' | 'KB' |
| source | String | media | 来源。可选项：media/messageFile | N |
Upload Events
| 名称 | 参数 | 描述 |
|---|---|---|
| add | (files: MediaContext) |
选择后触发，仅包含本次选择的照片；url 表示选定视频的临时文件路径 (本地路径)。duration 表示选定视频的时间长度。size选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。详细类型定义。`type MediaContext = VideoContext[] |
| complete | - | 上传成功或失败后触发 |
| fail | - | 上传失败后触发 |
| remove | (index: number; file: UploadFile) |
移除文件时触发 |
| select-change | (files: MediaContext[]; currentSelectedFiles: MediaContext[]) |
选择文件或图片之后，上传之前，触发该事件。files 表示之前已经上传完成的文件列表。currentSelectedFiles 表示本次上传选中的文件列表 |
| success | (files: MediaContext) |
上传成功后触发，包含所有上传的文件；url 表示选定视频的临时文件路径 (本地路径)。duration 表示选定视频的时间长度。size选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。详细类型定义。`type MediaContext = VideoContext[] |
| click | `(file: VideoContext | ImageContext)` |