上传 Upload

表单 · 可交互组件

本地选择、上传钩子和失败反馈

按需导入wbbb-ui/components/upload

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { WbbbUpload } from 'wbbb-ui/components/upload'
import type { WbbbUploadFile } from 'wbbb-ui/components/upload'

const files = ref<WbbbUploadFile[]>([])
async function uploader(file: WbbbUploadFile) {
  return { ...file, path: await uploadToBusinessServer(file.path) }
}
</script>

<template>
  <WbbbUpload v-model="files" :uploader="uploader" locale="zh-CN" />
</template>

真实移动端预览新窗口打开 ↗

状态与交互

以下状态均可在右侧的真实 Playground 中操作与验收。

默认已填写焦点禁用错误

API 参考

属性（Props）

属性	说明	类型	默认值	必填
`beforeRead`	文件读取前执行，可阻止文件被接收。	`(files: WbbbUploadFile[]) => boolean \\| Promise<boolean>`	`—`	否
`count`	设置渲染的占位行数或项目数。	`number`	`9`	否
`disabled`	是否禁止用户与组件交互。	`boolean`	`false`	否
`locale`	覆盖组件内置文案使用的语言。	`WbbbLocaleInput`	`—`	否
`modelValue`	提供 v-model 使用的当前值。	`WbbbUploadFile[]`	`() => []`	否
`text`	提供主要展示文案。	`string`	`由 locale 决定`	否
`uploader`	提供由业务层注入的上传实现。	`(file: WbbbUploadFile, options?: { signal?: AbortSignal }) => WbbbUploadFile \\| Promise<WbbbUploadFile>`	`—`	否

事件（Events）

update:modelValue
afterRead
change
error
remove

插槽（Slots）

无

双向绑定

支持 v-model（modelValue）。

平台说明

构建验证：H5、App Vue、微信小程序、支付宝小程序与抖音小程序。

运行时差异：H5 支持键盘焦点与减弱动效；小程序端使用等价触控交互。上传、日期选择和服务弹层应在目标端再次验收。

使用提示：上传器由业务层注入；处理 beforeRead、失败、重试、删除与卸载取消，避免绑定云厂商 SDK。

上传 Upload ​

基础用法 ​

状态与交互 ​

API 参考 ​