ThorUI文档

# 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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-skeleton 骨架屏 →