Upload 上传

原生 <input type="file"> 驱动 + 拖拽区。请求由使用方通过 request prop 提供（库零运行时依赖，不内置 HTTP 客户端）。

基础用法

基础用法

选择文件

<script setup lang="ts">
</script>

<template>
  <LhUpload :max-size="1048576" :accept="['.png', '.jpg']" />
</template>

<script>
export default {}
</script>

<template>
  <LhUpload :max-size="1048576" :accept="['.png', '.jpg']" />
</template>

accept 也支持逗号字符串写法（如 accept=".png,.jpg"，静态属性直接书写）。

拖拽 + 自定义请求

拖拽上传

将文件拖到此处，或点击上传

<script setup>
const fakeRequest = ({ file, onProgress }) =>
  new Promise((resolve) => {
    let percent = 0
    const timer = setInterval(() => {
      percent += 20
      onProgress(percent)
      if (percent >= 100) {
        clearInterval(timer)
        resolve({ url: `https://example.com/${file.name}` })
      }
    }, 200)
  })
</script>

<template>
  <!-- 拖拽上传 -->
  <LhUpload drag :multiple="true" :request="fakeRequest" />
</template>

<script>
export default {
  methods: {
    fakeRequest({ file, onProgress }) {
      return new Promise((resolve) => {
        let percent = 0
        const timer = setInterval(() => {
          percent += 20
          onProgress(percent)
          if (percent >= 100) {
            clearInterval(timer)
            resolve({ url: `https://example.com/${file.name}` })
          }
        }, 200)
      })
    },
  },
}
</script>

<template>
  <!-- 拖拽上传 -->
  <LhUpload drag :multiple="true" :request="fakeRequest" />
</template>

禁用与数量上限

disabled 禁用上传；max-count 限制最多上传的文件数。

禁用 / 数量上限

选择文件

选择文件

<script setup lang="ts">
</script>

<template>
  <LhUpload disabled />
  <LhUpload :max-count="2" />
</template>

<script>
export default {}
</script>

<template>
  <LhUpload disabled />
  <LhUpload :max-count="2" />
</template>

API

LhUpload Props

属性名	说明	类型	默认值
multiple	允许多选	boolean	false
drag	拖拽上传区	boolean	false
disabled	禁用	boolean	false
accept	允许的扩展名 / MIME，数组（['.png', 'image/*']）或逗号字符串（'.png,.jpg'）均可	string | string[]	() => []
maxSize	单个文件大小上限（字节）	number	[LH_UPLOAD_MAX_SIZE](#const-LH_UPLOAD_MAX_SIZE)
maxCount	数量上限（0 为不限）	number	0
request	上传请求函数（不传则只做本地选择与校验）	(options: { file: File; onProgress: (percent: number) => void; }) => Promise<{ url?: string; }>	—
sx	sx 快速布局属性	LhSxProps	—

Events

事件名	说明	回调参数
change	文件列表变化时触发（新增文件、上传结束、移除文件后）	(files: LhUploadFile[])
success	单个文件上传成功后触发	(file: LhUploadFile)
error	单个文件上传失败后触发	(file: LhUploadFile, reason: string)
remove	移除文件后触发	(uid: string)

插槽：default（触发区内容）。

LhUploadRequest

(options: { file: File; onProgress: (percent: number) => void }) => Promise<{ url?: string }>

无障碍

• 原生 <input type="file"> 视觉隐藏但保留在无障碍树，aria-label 命名
• 触发区 role="button" + tabindex + Enter/Space 打开文件选择，禁用时移出交互
• 进度条 role="progressbar" + aria-valuenow/min/max；校验失败 role="alert" 播报；每项移除按钮带文件名命名

类型定义

本组件对外导出的 TypeScript 类型结构如下（自动提取自 packages/components/upload/src/types.ts 与 @lh-ui/share/core/* 源码，点击各条目展开查看完整定义；属性说明见上方 Props 表）：

LhUploadProps

export interface LhUploadProps {
  /** 允许多选 */
  multiple?: boolean
  /** 拖拽上传区 */
  drag?: boolean
  /** 禁用 */
  disabled?: boolean
  /** 允许的扩展名 / MIME：数组 `['.png', 'image/*']` 或逗号字符串 `'.png,.jpg'` */
  accept?: string[] | string
  /** 单个文件大小上限（字节） */
  maxSize?: number
  /** 数量上限（0 为不限） */
  maxCount?: number
  /** 上传请求函数（不传则只做本地选择与校验） */
  request?: LhUploadRequest
  /** sx 快速布局属性 */
  sx?: LhSxProps
}

LhUploadRequest _{（来自 @lh-ui/share/core/upload）}

/** 上传请求函数签名（由使用方提供，库不内置 HTTP 客户端） */
export type LhUploadRequest = (options: {
  file: File
  onProgress: (percent: number) => void
}) => Promise<{ url?: string }>

LhUploadFileStatus _{（来自 @lh-ui/share/core/upload）}

/** 文件项状态 */
export type LhUploadFileStatus = 'ready' | 'uploading' | 'success' | 'fail'

LhUploadFile _{（来自 @lh-ui/share/core/upload）}

/** 上传文件项 */
export interface LhUploadFile {
  /** 唯一标识（内部生成或用户提供） */
  uid: string
  /** 文件名 */
  name: string
  /** 字节大小 */
  size: number
  /** 状态 */
  status: LhUploadFileStatus
  /** 上传进度 0-100 */
  percent: number
  /** 服务端返回地址（成功时） */
  url?: string
  /** 失败原因 */
  error?: string
  /** 原始 File 对象 */
  raw?: File
}

常量

本组件用到的公开常量如下（可在 Props 表的「类型 / 默认值」列点击同名条目跳转至此）：

LH_UPLOAD_MAX_SIZE _{（来自 @lh-ui/share/core/upload）}

/** 默认大小上限 5MB */
export const LH_UPLOAD_MAX_SIZE = 5 * 1024 * 1024