Upload 上传

Form · Interactive component

Local selection, upload hooks, and failure feedback.

On-demand importwbbb-ui/components/upload

Basic Usage

Example code

<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="en-US" />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultFilledFocusDisabledError

API Reference

Props

Property	Description	Type	Default	Required
beforeRead	Runs before file selection is accepted and can block the read.	(files: WbbbUploadFile[]) => boolean \| Promise<boolean>	—	No
count	Sets the number of rendered placeholder rows or items.	number	9	No
disabled	Prevents user interaction with the component.	boolean	false	No
locale	Overrides the locale used for built-in display copy.	WbbbLocaleInput	—	No
modelValue	Provides the current value used by v-model.	WbbbUploadFile[]	() => []	No
text	Provides the primary display text.	string	由 locale 决定	No
uploader	Provides the business-layer upload implementation.	(file: WbbbUploadFile, options?: { signal?: AbortSignal }) => WbbbUploadFile \| Promise<WbbbUploadFile>	—	No

Events

• update:modelValue
• afterRead
• change
• error
• remove

Slots

None

Two-way binding

Supports v-model (modelValue).

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Inject the uploader from the business layer and handle beforeRead, failures, retries, deletion, and cancellation.