Upload 上传组件

支持图片和视频，提供多种配置选项，包括上传模式、图标、数量限制

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='上传'>
		<t-card class="mlrt.30" title='图片上传'
			sub-title="支持宝云扩展存储上传,可判断是否重复上传,节省扩展存储空间,上传逻辑需要自己编写,组件返回上传列表和文件文件哈希值,这里演示的是阿里云扩展存储上传文件,详细实现见模版个人资料头像上传"></t-card>
		<introduction title="支持宝云扩展存储上传说明" content-class="tdb">
			<t-text class="slh.45">1:选择文件，获取文件MD5校验值并返回本地缓存地址，前端采用缓存地址渲染图片</t-text>
			<t-text class="slh.45">2:请求支付宝扩展存储获取授权和服务端存储路径</t-text>
			<t-text class="slh.45">3:当用户提交表单或者提交表单时后台上传图片，这样可以不用等待上传结果卡界面</t-text>
			<t-text class="slh.45">4:异步返回上传回调</t-text>
		</introduction>
		<introduction title="基础功能" content-class="tdb">
			<t-upload v-model="images" :count="3"></t-upload>
		</introduction>
		<introduction title="禁用关闭" content-class="tdb">
			<t-upload v-model="images" :count="8" :deletable="false"></t-upload>
		</introduction>
		<introduction title="禁用预览" content-class="tdb">
			<t-upload v-model="images" :deletable="false" :previewImage="false"></t-upload>
		</introduction>
		<introduction title="文件大小限制" content-class="tdb">
			<t-upload v-model="images" :max-size="300"></t-upload>
		</introduction>
		<introduction title="自定义尺寸" content-class="tdb">
			<t-upload v-model="images1" child-class="w.100%-h.300" upload-icon-class="twh.100%"
				upload-icon="static/image/mqplavqy.png" :count="1" :max-size="300">
			</t-upload>
		</introduction>
		<t-button class="m.30" type='s' @click="submit">点提交表单后台开始上传，提升用户体验</t-button>
		<t-row class="h.30"></t-row>
	</t-page>
</template>
<script>
	import { TuiUploadOptions } from '@/uni_modules/t-ui'
	import { TuiApi } from '@/api/uriApi.uts'
	export default {
		data() {
			return {
				images1: [] as string[],
				images: [
					{ url: '/static/image/6527ae979850d.jpg' },
					{ url: '/static/image/65275c9ac3b1d.jpg' },
					{ url: '/static/image/652769fa89bcf.jpg' }
				] as TuiUploadOptions[]
			};
		},
		methods: {
			submit() {
				const uploadList = this.images.filter((item : TuiUploadOptions) : boolean => {
					return (item.path != '' && item.path != null)
				})
				//获取上传
				TuiApi('getUploadFileOptionsplus', { list: uploadList }).then(res => {
					console.log(res)
				})
			}
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
type	组件场景 (默认 "")	String	''	'info', 'primary', 'error', 'warning', 'success'
modelValue	上传文件选项数组	TuiUploadOptions[]	[]	-
closeIcon	关闭图标的名称	String	'close-circle-fill'	-
closeIconClass	关闭图标的额外类名	String	''	-
sourceType	图片或视频拾取模式	String[]	['album', 'camera']	-
uploadIcon	上传区域的图标名称	String	'camera-fill'	-
uploadIconClass	上传图标的额外类名	String	''	-
count	最大上传数量	Number	-1	-
sizeType	所选的图片的尺寸	String[]	['original', 'compressed']	-
deletable	是否展示删除按钮	Boolean	true	true, false
maxSize	文件大小限制，单位为byte	Number	0	-
fileList	文件列表	Object	{}	-
previewImage	是否预览	Boolean	true	true, false
childClass	子元素的额外类名	String	''	-

Events

事件名	描述	回调参数	版本
update:modelValue	当选中项发生变化时触发	newVal	-
change	当文件上传状态发生变化时触发	newVal	-

Slots

名称	描述
-	-