Tui

Upload 图片上传

TsUpload 是一款简洁灵活的图片上传组件，支持多文件上传、大小限制、缩略图展示等功能，适用于多种上传场景。

默认提供按钮样式和缩略图展示方式，结合简易的配置即可快速集成至业务系统，提升上传交互体验。

基础用法

无需额外配置，即可快速实现单张图片上传。

可通过 text 自定义按钮文案， filekm 设置最大上传文件大小， limit 控制上传数量。

示例代码

vue

<template>
  <TsUpload width="200px" />
  <TsUpload width="200px" text="根据你的业务自定义" filekm="2M" :limit="3" />
</template>

缩略图上传模式

设置 mode="thumbnail" 启用缩略图上传样式，适用于头像、图片展示类场景。

示例代码

vue

<template>
  <TsButton :style="{ marginBottom: '16px' }" @click="handleClearFile">重置上传</TsButton>
  <TsUpload :limit="5" mode="thumbnail" width="150" :dropZone="true" fit="cover" ref="thumbnailUploadRef" @error="getUploadError" />
</template>
<script setup lang="ts">
  const thumbnailUploadRef = ref<typeof TsUpload>();
  const handleClearFile = () => {
    thumbnailUploadRef.value?.clearFiles();
  };
</script>

拖拽上传

开启 dropZone 模式后, 可将文件直接拖入指定区域完成上传。搭配slot 轻松实现上传的自定义样式。

拖动文件到此处上传

示例代码

vue

<template>
  <TsUpload :dropZone="true" width="100%">
    <div class="self-upload-content">拖动文件到此处上传</div>
  </TsUpload>
</template>

自定义 slot 组成头像上传

并通过 slot 自定义上传区域内容，这里以 TsImage 作为上传按钮和展示容器。

点击上传

示例代码

vue

<template>
  <TsUpload @getBase64="handleGetBase64" width="121" :previewable="false" resetable>
    <TsAvatar :src="avatarUrl" isUpload width="121" @error="onError">
      <template #fallback>
        <div class="fallback-wrap" :class="errorClass">点击上传</div>
      </template>
    </TsAvatar>
  </TsUpload>
</template>

属性 Props

text

上传按钮文字

String

选择图片

list

图片列表

Array

[]

filekm

文件大小限制, 单位KB, M

String

20M

multiple

是否支持多选

Boolean

false

limit

最大上传数量

Number

mode

模式类型

String

button / thumbnail

button

previewList

预览列表

Array

[]

drag

dropZone

是否支持拖拽上传, mode 为 button 时禁用

Boolean

false

width

上传区域宽度, 主要用于slot 自定义的交互区域宽度

String / Number

height

上传区域高度, 主要用于slot 自定义的交互区域高度, 默认同步width

String / Number

previewable

是否可以预览，

Boolean

true

resetable

是否可以重置，0.0.8 版本新增

[Boolean, String, Null]

false

limitErrorText

是否可以重置，0.2.9 版本新增

String

添加的文件数量超出限制

事件 Events

onChange

获取文件, 选择文件后回调,multiple 为 true 时, 一次性返回所有文件

Files

getBase64

获取当前操作的图片base64, 仅在 accept 为 image/* 时生效

File

error

文件选择失败的回调

String | undefined

插槽 Slots

default

自定义上传区域