t-upload

Upload 上传

组件介绍

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

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

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

<template>
  <view class="upload-demo">
    <!-- 单图上传 -->
    <t-upload v-model="image1" :count="1"></t-upload>
    
    <!-- 多图上传 -->
    <t-upload 
      v-model="images" 
      :count="9"
      :previewImage="true">
    </t-upload>
    
    <!-- 自定义样式 -->
    <t-upload 
      v-model="images2" 
      :count="6"
      type="primary"
      icon="camera-fill"
      itemBoxClass="custom-box">
    </t-upload>
    
    <!-- 不显示删除按钮 -->
    <t-upload 
      v-model="images3" 
      :count="3"
      :closed="false">
    </t-upload>
  </view>
</template>

<script setup>
const image1 = ref([]);
const images = ref([]);
const images2 = ref([]);
const images3 = ref([]);
</script>

<style scoped>
.upload-demo {
  padding: 40rpx;
}
.upload-demo t-upload {
  margin-bottom: 40rpx;
}
</style>

Props

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

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	状态显示盒子样式

数据格式

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

插槽

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