跳到主要内容

上传 Uploader

用于将本地图片上传到服务器,可以展示上传进度、结果预览。

备注
  1. 内置 wx 所有选择文件 api
  2. 内置上传操作
  3. 内置上传进度

安装使用

{
// 原生小程序
"usingComponents": {
"ti-uploader": "@titian-design/weapp/uploader/index"
},
// titan-cli 搭建的项目
"usingComponents": {
"ti-uploader": "platform://titian-mp/ti-uploader"
}
}

用法示例

基本使用方式

基础用法

选择完文件后,立即执行上传操作。

<ti-uploader
url="https://api.bayfiles.com/upload"
size="small"
choose-text="请选择文件"
></ti-uploader>

自定义参数

自定义header

<ti-uploader
url="https://api.bayfiles.com/upload"
image-params="{{ params }}"
afterUpload="{{ afterUpload }}"
bind:change="change"
></ti-uploader>

手动上传

通过设置 immediatelyfalse,并调用 submit() 方法,可以手动控制上传时机。

<ti-uploader
id="titian-uploader"
url="https://api.bayfiles.com/upload"
size="small"
count="{{ 10 }}"
beforeUpload="{{ beforeUpload }}"
immediately="{{ false }}"
choose-text="请选择"
></ti-uploader>

仅使用组件样式,自定义上传

<ti-uploader
value="{{ fileList }}"
immediately="{{ false }}"
after-choose="{{ afterChoose }}"
bind:change="change"
></ti-uploader>

ti-uploader API

属性 Properties

名称类型是否必填默认值说明备注
valueunknown-使用 value,组件为受控模式-
default-valueUploadFileParams[][]使用 defaultValue ,组件为非受控模式
disabledbooleanfalse禁用交互能力
choose-typeUploadApiEnumfalse文件类型
immediatelybooleantrue是否立刻上传-
immediately-choosebooleantrue点击后立即选择-
sizesmall | largesmall组件尺寸-
choose-textstring选择器文案-
use-choose-slotbooleanfalse是否使用选择器插槽-
choose-iconstringplus选择器 icon-
source-typearray['album', 'camera']选择图片的来源-
size-typearray['original', 'compressed']type 为 image 有效; original = 原图; compressed = 压缩-
max-durationnumber10对应微信选择文件参数。拍摄视频最长拍摄时间,单位秒。时间范围为 3s 至 60s 之间。不限制相册。-
cameraback | frontback仅在 sourceType 为 camera 时生效,使用前置或后置摄像头-
countnumber9选择文件/图片/视频的数量-
media-typearray['image', 'video']文件类型,可选值 image / video / mix-
urlstring-上传地址-
chooseFunction选择函数-
before-chooseFunction选择前的处理函数-
after-chooseFunction选择后的处理函数-
before-uploadFunction- 上传前置方法 可用用于处理上传参数-
uploadFunction自定义上传方法,不传则使用内置的上传方法-
completeFunction上传完成/删除完成后调用-
after-uploadFunction上传后置方法,后置处理返回结果-
upload-exercise'' | loading | progressloading上传中展示风格-
upload-exercise-textstring上传中上传中文案-
upload-fail-textstring上传失败上传失败文案-
image-paramsRecord<string, any>{}上传图片参数;当不传自定义 beforeUpload 方法时,可以传该参数作为内部 beforeUpload 的参数-
video-paramsRecord<string, any>{}上传视频参数;当不传自定义 beforeUpload 方法时,可以传该参数作为内部 beforeUpload 的参数-
file-paramsRecord<string, any>{}上传文件参数;当不传自定义 beforeUpload 方法时,可以传该参数作为内部 beforeUpload 的参数-
image-result-format(string | number)[][]图片参数;当不传自定义 afterUpload 方法时,可以传该参数作为内部 afterUpload 的参数-
video-result-format(string | number)[][]视频参数;当不传自定义 afterUpload 方法时,可以传该参数作为内部 afterUpload 的参数-
file-result-format(string | number)[][]文件参数;当不传自定义 afterUpload 方法时,可以传该参数作为内部 afterUpload 的参数-
ext-stylestring''容器样式-

事件 Events

名称参数列表描述备注
bind:change(e: WechatMiniprogram.CustomEvent<{ file: UploadFile; fileList: UploadFile[]; uploading: boolean }>) => void上传处理
bind:error(e: WechatMiniprogram.CustomEvent<{ status: string; message: string; }>) => void错误事件
bind:choose(e: WechatMiniprogram.CustomEvent<any>) => void选择事件

外部样式类 External Classes

名称说明备注
ext-class根节点可扩展的类名-
ext-thum-box-class缩略图容器类名--
ext-thum-tip-class缩略图容器提示类名--
ext-thum-class缩略图类名--
ext-thum-image-class缩略图-图片类名--
ext-thum-video-class缩略图-视频类名--
ext-thum-other-class缩略图-其他类名--
ext-action-class选择器-类名--

CSS 变量 CSS Variable

变量默认值说明备注
--uploader-name-colorvar(--neutral-color-4, #c4c4c4)上传文件展示区文字颜色-
--uploader-name-font-size24rpx上传文件展示区文字大小-
--uploader-action-bg-colorvar(--neutral-color-7, #f5f5f5)上传区背景色-
--uploader-action-text-colorvar(--neutral-color-4, #c4c4c4)上传区文字颜色-
--uploader-icon-colorvar(--neutral-color-3, #9e9e9e)上传区 icon 颜色-
--uploader-disabled-colorvar(--neutral-color-5, #e0e0e0)上传区禁用 icon、(失败)文字颜色-
--uploader-fail-colorvar(--neutral-color-9, #ffffff)上传文件失败文字颜色-
--uploader-fail-bg-colorvar(--neutral-color-1, #212121)上传文件失败背景颜色-
--uploader-loading-colorvar(--neutral-color-9, #ffffff)上传文件 loading 颜色-
--uploader-loading-bg-colorvar(--neutral-color-1, #212121)上传文件 loading 背景颜色-
--uploader-small-size120rpx上传文件小尺寸容器大小-
--uploader-small-margin24rpx上传文件小尺寸容器外边距-
--uploader-small-radiuscalc(var(--base-radius-size, 0rpx) + 8rpx)上传文件小尺寸容器圆角-
--uploader-large-size216rpx上传文件大尺寸容器大小-
--uploader-large-margin24rpx上传文件大尺寸容器外边距-
--uploader-large-radiuscalc(var(--base-radius-size, 0rpx) + 12rpx)上传文件大尺寸容器圆角-

数据结构 Data Structure

export enum UploadApiEnum {
/** wx.chooseImage */
CHOOSEIMAGE = 'chooseImage',
/** wx.chooseVideo */
CHOOSEVIDEO = 'chooseVideo',
/** wx.chooseMedia */
CHOOSEMEDIA = 'chooseMedia',
/** wx.chooseMessageFile */
CHOOSEMESSAGEFILE = 'chooseMessageFile'
}

文件 UploadFile

interface UploadFile extends UploadFileExternal {
key: string;
}

interface UploadFileExternal {
path: string;
poster?: string;
size: number;
name: string;
duration?: number;
fileType: UploadType;
status: UploadStatus;
}