BIN-UI-DESIGN

Appearance

On this page

上传 Upload ​

文件选择上传按钮，实现简单的上传封装

基础用法 ​

最基本用法，点击上传，一次选择一个文件。

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

多选 ​

可以开启多选模式来一次选择多个

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

手动上传 ​

绑定 before-upload，并返回false，可以阻止默认上传流程，手动控制文件上传。

可以自由控制上传逻辑，具体参考api实现

<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: '上传成功' })
  }, 1500)
}
</script>
<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: '上传成功' })
  }, 1500)
}
</script>

拖拽上传 ​

设置属性 type 为 drag，可以拖拽上传。

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>
<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 ​

参数说明类型可选值默认值
action上传的地址，必填string——
headers上传的请求头Object—{}
multiple是否支持多选Boolean—false
paste是否支持粘贴上传Boolean—false
disabled禁用Boolean—false
data上传时附带的额外参数Object——
name上传的文件字段名String—file
with-credentials支持发送 cookie 凭证信息Boolean—false
show-upload-list是否显示已上传文件列表Boolean—true
type上传控件的类型Stringselect（选择），drag（支持拖拽）select
accept接受上传的文件类型,input 标签原生的 accept 属性，会在选择文件时过滤String——
format支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名String——
max-size文件大小限制，单位 kbNumber——
before-upload上传文件之前的钩子，参数为上传的文件,若返回 false 或者 Promise 则停止上传Function——
on-progress文件上传时的钩子，返回字段为 event, file, fileListFunction——
on-success文件上传成功时的钩子，返回字段为 response, file, fileListFunction——
on-error文件上传失败时的钩子，返回字段为 error, file, fileListFunction——
on-preview点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据Function——
on-remove文件列表移除文件时的钩子，返回字段为 file, fileListFunction——
on-format-error文件格式验证失败时的钩子，返回字段为 file, fileListFunction——
on-exceeded-size文件超出指定大小限制时的钩子，返回字段为 file, fileListFunction——
default-file-list默认已上传的文件列表，例如：[{name: 'img1.jpg',url: 'http://www.xxx.com/img1.jpg' }, { name: 'img2.jpg', url: 'http://www.xxx.com/img2.jpg' }]Array—[]

Methods ​

方法名说明参数
clearFiles清空已上传的列表无

Slot ​

名称说明
default触发上传组件的控件，默认是一个按钮
tip辅助的提示消息，如：单个文件不能超过2M

MIT Licensed | Copyright © 2023-present bin-ui-design