useUpload 上传

通用上传 Hooks

基础用法

<script setup>
const { openWindow, deleteFile, fileList } = useUpload({
  multiple: true,
  accept: '*',
});
</script>

<template>
  <template v-for="(item, index) of fileList" :key="item.key">
    <sp-file
      :file-name="item.file.name"
      :file-size="item.file.size"
      :thumbnail-url="item.thumbnailUrl"
      :percentage="item.scanProgress"
      :delete-enabled="deleteEnabled"
      @delete="deleteFile(index)"
    >
    </sp-file>
  </template>

  <div class="btn-file-upload" key="btnUpload" @click="openWindow()">
    <sp-icon name="plus"></sp-icon>
  </div>
</template>

上传至公共资源目录

useUpload 方法的第二个参数是一个响应式参数，您可以传入要上传的公共资源目录类型，可以使用枚举 publicResourceType，枚举以外的值不支持。

<script setup>
const { openWindow, deleteFile, fileList } = useUpload(
  {
    multiple: true,
    accept: '*',
  },
  publicResourceType.WEBCALL,
);
</script>

API

useUpload 属性

属性名	说明	类型	默认值
multiple	是否允许用户选择多个文件	boolean	true
accept	接受的文件类型，可以包含一个或多个（用逗号分隔）唯一文件类型说明符的字符串 MDN Reference	string	'*'
partSize	每个分片大小（单位：KB）	number	1024
maxFileSize	单个文件最大大小（单位：MB）	number	50
autoUpload	是否开启自动上传，选择文件后直接上传	boolean	false

useUpload 暴露

名称	说明	类型
openWindow	打开文件选择面板，返回是否打开成功	() => boolean
deleteFile	删除文件	(index: number) => void
clearFileList	清空文件上传列表	() => void
fileList	文件上传列表，会记录当前选择文件的信息、上传进度、是否上传成功等信息	Readonly<UnwrapNestedRefs<FileInfo[]>>
uploading	当前是否处于上传阶段，上传阶段应该禁用上传按钮	Readonly<Ref<boolean>>