SpUpload 上传

将分片上传进行了封装，可以显示文件列表，通过点击上传按钮上传附件。如果不想使用上传列表可以使用 useUpload 函数。

基础用法

<script setup>
import { ref } from 'vue';
import type { SpUploadInstance } from '@/components/form/sp-upload/types';
import SpFile from '@/components/data/sp-file/SpFile.vue';
import SpUpload from '@/components/form/sp-upload/SpUpload.vue';

// 历史附件数据
const fileList = ref([
  {
    name: '产品说明书.pdf',
    size: 23548685,
  },
  {
    name: '2023年第3季度报表.pdf',
    size: 235486,
  },
]);

const uploadRef = ref<SpUploadInstance | undefined>();

// 这样可以获取到文件上传列表
uploadRef.value?.fileList
</script>

<template>
  <SpUpload ref="uploadRef">
    <template #default>
      <SpFile v-for="file in fileList" :file-name="file.name" :file-size="file.size"></SpFile>
    </template>
    <template #fileOperate="{ fileInfo }">
      {{ fileInfo.fileId }}
    </template>
  </SpUpload>
</template>

API

SpUpload 属性

属性名	说明	类型	默认值
multiple	是否允许用户选择多个文件	boolean	true
accept	接受的文件类型，可以包含一个或多个（用逗号分隔）唯一文件类型说明符的字符串 MDN Reference	string	'\*'
partSize	每个分片大小（单位：KB）	number	1024
maxFileSize	单个文件最大大小（单位：MB）	number	50
autoUpload	是否开启自动上传，选择文件后直接上传	boolean	false
deleteEnabled	启用删除功能	boolean	false
publicResourceType	公共资源类型，可以讲文件上传至某个公共资源目录，公共资源目录下的文件无需签名即可访问。	PublicResourceType	-

SpUpload 暴露

名称	说明	类型
fileList	文件上传列表	Readonly<UnwrapNestedRefs<FileInfo[]>>
uploading	文件是否正在上传	Readonly<Ref<boolean>>

SpUpload 插槽

插槽名	说明	子标签
default	默认插槽，可以添加历史文件列表	SpFile
fileOperate	文件拓展操作插槽，可以扩充一些内容	-