# 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)

# 微信小程序引入(可在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

参数 类型 说明 默认值
value Array<String> 初始化图片路径 [ ]
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

事件名 说明 回调参数
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示例小程序码