# tui-upload 图片上传
介绍
图片上传,支持对单张图片大小限制,支持限制上传图片类型。
特别说明
图片上传成功后默认接口返回数据格式以及必要的参数如下:
{
"code":100,
"msg":"成功",
"url":"https://thorui.cn/public/8aa6a3cb5f8b439db77ba1d14f51b22a.png"
}
如果 code % 100 === 0
则表示上传成功,否则为上传失败,如果需要自定义返回数据格式请根据组件内提示修改。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiUpload from "@/components/thorui/tui-upload/tui-upload"
export default {
components:{
tuiUpload
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|---|
升级中 | √ | √ | √ | √ | √ | √ | √ |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-upload": "/components/thorui/tui-upload/tui-upload"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
基础使用
value
属性为初始化图片路径,serverUrl
属性为上传接口地址,当接口地址为空时,直接返回本地图片地址。
<!--uni-app-->
<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
<!--微信小程序-->
<tui-upload value="{{value}}" serverUrl="{{serverUrl}}" bindcomplete="result" bindremove="remove"></tui-upload>
# Slots
none
# Props
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
width V1.6.2+ | [Number,String] | 展示图片的宽度,单位rpx | 220 |
height V1.6.2+ | [Number,String] | 展示图片的高度,单位rpx | 220 |
value | Array<String> | 初始化图片路径 | [ ] |
delConfirm V1.7.2+ | Boolean | 删除图片前是否弹框确认 | false |
forbidDel | Boolean | 禁用删除 | false |
forbidAdd | Boolean | 禁用添加 | false |
serverUrl | String | 服务器接口地址。当接口地址为空时,直接返回本地图片地址 | "" |
limit | Number | 限制数 | 9 |
sizeType | Array<String> | original 原图,compressed 压缩图,默认二者都有 | ['original', 'compressed'] |
sourceType | Array<String> | album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项 | ['album', 'camera'] |
imageFormat | Array<String> | 上传图片类型,默认为空数组,不限制,格式:['jpg','png','gif'] | [ ] |
size | Number | 单张图片大小限制 MB | 4 |
fileKeyName | String | 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 | file |
header | Object | HTTP 请求 Header, header 中不能设置 Referer | { } |
formData | Object | HTTP 请求中其他额外的 form data | { } |
params V1.6.1 | [Number, String] | 自定义参数,触发事件时回传 | 0 |
# Events
注意:uni-app绑定事件使用@,微信小程序使用bind。
事件名 | 说明 | 回调参数 |
---|---|---|
complete | 上传完成事件 | { //上传状态 1-成功 2-上传中 3-失败 status:Number, //图片信息 imgArr:Array //自定义参数 params: params //是否手动上传 manual: false } |
remove | 删除图片,回传index | { index:Number, params: params //自定义参数 } |
# Methods
uni-app通过ref (opens new window) 来注册组件引用信息,微信小程序通过 this.selectComponent
获取子组件的实例对象。
方法名 | 说明 | 传入参数 |
---|---|---|
uploadAllImageV1.6.1 | 当属性serverUrl传空时,父级可调用该方法一次性上传所有图片 | serverUrl(服务器接口地址) |
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |