Tui Plus Vapor

Appearance

# t-upload

Upload 上传

t-upload 组件介绍 ​

t-upload 是用于图片/文件上传的组件，支持图片选择、预览、删除等功能。组件仅返回文件选择列表，上传逻辑需要自行编写。支持阿里云 OSS 等云存储上传，可判断是否重复上传以节省存储空间。

t-upload 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-upload 基础用法 ​

基础用法参考 demo/upload/upload.uvue。

vue
<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title='图片上传'
				sub-title="仅实现图片选择返回数据 md5值,5.0新增支持拖拽"></t-card>
		<t-section class="mb-15"
				   title="基础功能"></t-section>
		<t-col :class="[`tvg tpm trm fww mb-15`]">
			<t-upload v-model="images"
					  size="large"
					  :count="20"></t-upload>
		</t-col>
		<t-section class="mb-15"
				   title="视频上传"></t-section>
		<t-col :class="[`tvg tpm trm fww mb-15`]">
			<t-upload v-model="images1"
					  mode="video"
					  size="large"
					  :count="20"></t-upload>
		</t-col>
		<t-section class="mb-15"
				   title="禁用预览"></t-section>
		<view :class="[`tpm trm mb-15 tvg`]">
			<t-upload v-model="images"
					  size="large"
					  :preview-image="false"></t-upload>
		</view>
		<t-section class="mb-15"
				   title="状态"></t-section>
		<view :class="[`tpm trm mb-15 tvg`]">
			<t-upload v-model="images2"
					  class="mb-15"
					  state-box-class="bg-rgba(0,0,0,0.8)!"></t-upload>
			<t-upload v-model="images2"></t-upload>
		</view>

		<t-section title="其它用法示例"
				   class="mb-15"></t-section>

		<t-upload-single v-model="singleValue"
						 :item-box-class="['w-100% h-200 r-5']">
			<template #icon>
				<image src="/static/image/mqplavqy.png"
					   class="twh-100%"></image>
			</template>
		</t-upload-single>
		<t-section title="框架上传设计思路"
				   sub-title="详细用法可参考模版资料管理页，头像上传的实现"></t-section>
		<t-steps type="primary"
				 class="mb-15 h-320 bg-#fff r-20"
				 :current="1"
				 direction="vertical">
			<t-steps-item title="本地预处理"
						  desc="选择文件，获取文件MD5校验值并返回本地缓存地址，前端采用缓存地址渲染图片">
			</t-steps-item>
			<t-steps-item title="获取授权"
						  desc="使用MD5在服务器预定上传路径">
			</t-steps-item>
			<t-steps-item title="静默后台上传"
						  desc="使用预定路径提交表单到服务器退出页面后端静默上传，不阻塞界面交互">
			</t-steps-item>
			<t-steps-item title="接收回调"
						  desc="异步返回上传结果，处理成功或失败状态">
			</t-steps-item>
		</t-steps>
		<t-row class="h-15"></t-row>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const singleValue = ref<UTSJSONObject[]>([])
	const images1 = ref<string[]>([])
	const images = ref<UTSJSONObject[]>([
		{ url: '/static/image/goods/10.jpg' },
		{ url: '/static/image/goods/11.jpg' },
		{ url: '/static/image/goods/1.jpg' },
		{ url: '/static/image/goods/6.jpg' }
	])
	const images2 = ref<UTSJSONObject[]>([
		{ url: '/static/image/goods/10.jpg', status: { icon: 'warning', text: '文件超限' } },
		{ url: '/static/image/goods/11.jpg', status: { text: '上传中' } },
		{ url: '/static/image/goods/1.jpg', status: { text: '上传完成' } },
	])

	const submit = () => {
		const uploadList = images.value.filter((item : UTSJSONObject) => {
			return (item.path != '' && item.path != null)
		})
		// 这里可以继续处理uploadList
		console.log(uploadList)
	}
</script>

t-upload Props ​

属性名说明类型默认值
modelValue选中文件列表UTSJSONObject[][]
count最大上传数量，-1 表示不限制number1
closed是否显示关闭（删除）图标booleantrue
closeIcon移除图片的图标名称string'closes-fill'
closeIconClass移除图标的样式string''
icon添加按钮图标string'add-fill'
iconClass图标样式string''
itemBoxClass每一项盒子的样式string''
stateBoxClass状态进度显示盒子的样式string''
sourceType图片或视频拾取模式，可选 camera、albumstring[]['album', 'camera']
sizeType压缩模式，可选 original、compressedstring[]['original', 'compressed']
previewImage是否支持预览booleantrue
path点击组件后跳转的页面路径string''
hover是否启用点击效果booleanfalse
type组件主题类型string'primary'
disabled是否禁用booleanfalse
effect组件显示主题string'normal'
size组件尺寸，可选 large、medium、small、ministring'medium'

t-upload Events ​

事件名说明回调参数
update:modelValue文件列表变化时触发UTSJSONObject[]
change选择文件变化时触发UTSJSONObject[]
click点击时触发event
initFinished组件初始化完成触发组件节点信息
touchstart触摸开始时触发event
touchend触摸结束时触发event
touchmove触摸移动时触发event
touchcancel触摸取消时触发event

外部类 ​

类名说明
close-icon-class关闭图标样式
icon-class添加图标样式
item-box-class每一项盒子样式
state-box-class状态显示盒子样式

数据格式 ​

typescript
interface UploadFile {
  path: string;      // 本地临时路径
  url?: string;      // 上传后的网络地址
  name?: string;     // 文件名
  size?: number;     // 文件大小
  type?: string;     // 文件类型
  status?: {         // 上传状态
    icon?: string;   // 状态图标
    text?: string;   // 状态文本
  };
}

插槽 ​

插槽名说明
icon自定义添加按钮图标
state自定义状态显示内容