TUpload / 上传

Upload component with drag-and-drop zone, file preview, progress tracking, retry support, and full locale customization. / 上传组件提供拖拽上传区域、文件预览、进度追踪、重试支持和完整的国际化自定义。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
action	string	—	Upload URL / 上传地址
accept	string	—	Accepted file types (e.g. "image/*")
multiple	boolean	false	Allow multiple files
maxSize	number	—	Max file size in bytes
disabled	boolean	false	Disabled
locale	UploadLocale	—	Custom locale text / 自定义文本
name	string	'file'	File field name
headers	Record<string, string>	—	Custom upload headers
withCredentials	boolean	false	Send cookies

v-model

v-model	Type / 类型	Description / 说明
v-model	UploadFileInfo[]	File list / 文件列表

UploadFileInfo 接口

interface UploadFileInfo {
  uid: string
  name: string
  size: number
  status: 'pending' | 'uploading' | 'success' | 'error'
  percent?: number
  url?: string
  response?: any
}

Basic Usage / 基础用法

<script setup lang="ts">
import { TUpload } from '@gulcc/tabler-vue'

const files = ref([])
</script>

<template>
  <TUpload v-model="files" action="/api/upload" />
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TUpload, type UploadFileInfo } from '@gulcc/tabler-vue'

const files = ref<UploadFileInfo[]>([])
</script>

<template>
  <!-- With file type restriction / 限定文件类型 -->
  <TUpload
    v-model="files"
    action="/api/upload"
    accept="image/*"
    multiple
  />

  <!-- With size limit / 限制大小 -->
  <TUpload
    v-model="files"
    action="/api/upload"
    :max-size="5 * 1024 * 1024"
    accept="image/*"
  />

  <!-- Disabled / 禁用 -->
  <TUpload v-model="files" action="/api/upload" disabled />
</template>

Tips / 避坑指南

• maxSize is in bytes — calculate accordingly (e.g., 5 * 1024 * 1024 for 5MB)
• accept follows HTML <input accept> format, e.g. "image/*", ".pdf,.doc", "video/*"
• Upload progress is tracked via percent in UploadFileInfo — status transitions: pending → uploading → success | error
• File preview is auto-generated for images; other file types show a generic file icon
• Locale can be customized via the locale prop using the UploadLocale interface — useful for i18n