Upload

A file upload button with a simple upload wrapper.

Basic Usage

Basic usage: click to upload, selecting one file at a time.

<template>
  <div style="width: 400px">
    <b-upload action="//jsonplaceholder.typicode.com/posts/"></b-upload>
  </div>
</template>

Multi-select

Enable multi-select mode to select multiple files at once.

<template>
  <div style="width: 400px">
    <b-upload action="//jsonplaceholder.typicode.com/posts/" multiple>
      <b-button icon="cloud-upload" plain type="primary">Click to upload</b-button>
    </b-upload>
  </div>
</template>

Manual Upload

Bind before-upload and return false to prevent the default upload process, allowing manual control of file upload.

You can freely control the upload logic. Refer to the API implementation for details.

<template>
  <div style="width: 400px">
    <b-upload
      action="//jsonplaceholder.typicode.com/posts/"
      :before-upload="handleUpload"
    ></b-upload>

    <div v-if="file !== null" flex="cross:center">
      Upload file: {{ file.name }}
      <b-button type="text" :loading="loadingStatus" @click="upload">
        {{ loadingStatus ? 'Uploading...' : 'Click to upload' }}
      </b-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Message } from 'bin-ui-design'

const file = ref(null)
const loadingStatus = ref(false)

function handleUpload(f) {
  file.value = f
  return false
}
function upload() {
  loadingStatus.value = true
  setTimeout(() => {
    file.value = null
    loadingStatus.value = false
    Message({ type: 'success', message: '上传Success' })
  }, 1500)
}
</script>

Drag and Drop Upload

Set the type property to drag to enable drag-and-drop upload.

Click or drag files here to upload

<template>
  <div style="width: 400px">
    <b-upload action="//jsonplaceholder.typicode.com/posts/" multiple type="drag">
      <div
        style="padding: 20px 0; border: 1px dashed #eee; cursor: pointer"
        flex="dir:top main:center cross:center"
      >
        <p>
          <b-icon name="cloud-upload" size="52" style="color: #3399ff"></b-icon>
        </p>
        <p>Click or drag files here to upload</p>
      </div>
    </b-upload>
  </div>
</template>

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

Attributes

Parameter	Description	Type	Options	Default
action	Upload URL. Required	string	—	—
headers	Upload request headers	Object	—	{}
multiple	Whether to support multi-select	Boolean	—	false
paste	Whether to support paste upload	Boolean	—	false
disabled	Disabled	Boolean	—	false
data	Additional parameters sent with the upload	Object	—	—
name	Upload file field name	String	—	file
with-credentials	Support sending cookie credentials	Boolean	—	false
show-upload-list	Whether to show the uploaded file list	Boolean	—	true
type	Upload control type	String	select / drag	select
accept	Accepted file types. Native accept attribute of input. Filters files on selection	String	—	—
format	Supported file types. Unlike accept, format identifies files by their extension	String	—	—
max-size	File size limit in KB	Number	—	—
before-upload	Hook before upload. Receives the file. If it returns false or a rejected Promise, the upload is cancelled	Function	—	—
on-progress	Hook during upload. Returns event, file, fileList	Function	—	—
on-success	Hook on upload success. Returns response, file, fileList	Function	—	—
on-error	Hook on upload error. Returns error, file, fileList	Function	—	—
on-preview	Hook when clicking an uploaded file link. Returns file. Access server response via file.response	Function	—	—
on-remove	Hook when a file is removed from the list. Returns file, fileList	Function	—	—
on-format-error	Hook on file format validation failure. Returns file, fileList	Function	—	—
on-exceeded-size	Hook when file exceeds size limit. Returns file, fileList	Function	—	—
default-file-list	Default uploaded file list, e.g., [{ name: 'img1.jpg', url: 'http://www.xxx.com/img1.jpg' }, { name: 'img2.jpg', url: 'http://www.xxx.com/img2.jpg' }]	Array	—	[]

Methods

Method Name	Description	Parameter
clearFiles	Clear the uploaded file list	—

Slot

Name	Description
default	The trigger element for the upload component. Defaults to a button
tip	Helper tip message, e.g., "A single file cannot exceed 2MB"