Upload

上传弹框，自定义上传方式和下载模板

基本用法

通过v-model可以控制上传弹框的显示与否，同时需要template-api和upload-api来实现模板下载和文件上传的具体实现。

<template>
  <bc-button @click="visible = true">
    上传
  </bc-button>
  <bc-upload
    v-model="visible"
    :upload-api="upload"
    callback-type="file"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
defineOptions({
  name: 'Basic',
})
const visible = ref(false)
function upload(data: File) {
  // console.log(data.get('file'))
  console.log(data)
  return Promise.reject(new Error('error'))
}
</script>

Hide Source

手动上传

默认在用户选择文件后会自动上传，通过manual-upload属性可以关闭自动上传，搭配no-footer可以实现按钮手动上传。`

<template>
  <bc-button @click="visible = true">
    上传
  </bc-button>
  <bc-upload
    v-model="visible"
    :upload-api="upload"
    manual-upload
    callback-type="file"
    :no-footer="false"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
defineOptions({
  name: 'ManualUpload',
})
const visible = ref(false)
function upload(data: File) {
  // console.log(data.get('file'))
  console.log(data)
  return Promise.reject(new Error('error'))
}
</script>

Hide Source

Upload 属性

属性	说明	类型	可选值	默认值
modelValue/v-model	控制弹框展示	boolean	-	-
template-api	下载模板的回调	(): void	-	-
upload-api	触发文件上传的回调	(form: File | FormData | UploadRequestOptions): Promise	-	相当于el-upload的http-request
callback-type	文件上传回调的参数	string	'file','form','raw'	'form'
manual-upload	是否手动上传	boolean	-	-
no-footer	是否隐藏底部操作	boolean	-	true
title	弹窗标题	string	-	文件导入
accept	接受的文件类型	string	-	.xlsx,.xls
limit	最大上传数量	number	-	1

Source

Docs