SwUploadFile

SwUploadFile 是普通文件（PDF / 文档 / zip 等非图非视频）的分片上传组件，支持点击选择和拖拽。它是 useUploader().uploadFile 内功的薄壳 UI：与 SwUploadVideo 复用同一分片端点，但无转码二段（不需要 queryFn）——分片成功响应即含可访问 URL， uploadFn 直接 resolve 结果。

图片用 SwUploadImage、视频用 SwUploadVideo、其余文件用本组件。三者同为无样式组件：自身不渲染任何 UI，通过 uploadFn 注入上传逻辑、默认 slot 暴露状态。

基础用法 + 进度

点击选择文件，progress 作用域变量与 progress 事件实时反映分片上传进度。

加载中...

<script setup lang="ts">
const uploader = useUploader()

function onDone(result: { id: string; value: string }) {
  form.attachment = { id: result.id, url: result.value }
}
</script>

<template>
  <SwUploadFile :upload-fn="uploader.uploadFile" @success="onDone" v-slot="{ open, pending, progress }">
    <SwButton :disabled="pending" @click="open">
      {{ pending ? `上传中 ${progress}%` : '选择文件' }}
    </SwButton>
  </SwUploadFile>
</template>

自定义触发区（#default slot）

「+ 号上传卡」：默认 slot 完全接管触发区 UI，完成后给出可点击的下载链接。

加载中...

拖拽上传

通过 slot 的 isOver 高亮拖拽区域。普通文件不限 mime，任意文件均可拖入。

加载中...

限定文件类型（accept）

accept 透传给文件选择框，在选择层面过滤类型。

加载中...

多文件上传

开启 multiple 后可同时选择或拖入多个文件，内部并发上传并逐条 emit success。

加载中...

进度取舍：单文件场景 progress 精确；multiple 并发时多文件进度交错（后写覆盖），进度条以单文件场景为主要用途。

Props

名称	类型	必填	默认值	说明
`uploadFn`	`(file: File, options?: FileUploadOptions) => Promise<FileUploadResult>`	✓	—	实际上传函数，通常传 `useUploader().uploadFile`
`accept`	`string`		`'*'`	文件选择框 accept（普通文件默认不限类型）
`chunkSize`	`number`		`2097152`（2 MB）	分片大小（字节），透传 `uploadFn`
`retries`	`number`		`3`	单片失败最大重试次数，透传 `uploadFn`
`concurrency`	`number`		`undefined`	并发分片数，不传则委托底层默认 6，透传 `uploadFn`
`multiple`	`boolean`		`false`	是否允许多文件

类型定义

FileUploadOptions

interface FileUploadOptions {
  chunkSize?: number
  retries?: number
  concurrency?: number
  onProcess?: (result: ChunkProgress) => void
  onBefore?: (file: File) => void
}

FileUploadResult

type FileUploadResult = {
  id: string // 后端文件 ID（业务侧外键）
  value: string // 文件访问 URL（对齐 uploadImage 的 value 语义）
  file_md5: string // 整文件 MD5
}

Events

事件名	载荷类型	说明
`progress`	`pct: number`	上传进度百分比（0–100）
`success`	`FileUploadResult`	单个文件上传成功后触发（每文件一条）
`error`	`err: Error`	上传异常时触发（非 Error 规整为 Error 实例）

Slots

default（作用域 slot）

作用域变量	类型	说明
`isOver`	`boolean`	文件正在拖拽悬停区域上方
`pending`	`boolean`	上传进行中
`progress`	`number`	当前上传进度（0–100）
`open`	`() => void`	手动触发文件选择对话框

注意事项

无样式：不内置任何 CSS，UI 完全交给 slot 的消费方实现。
uploadFn 通常封装自 useUploader（uploadFile 方法）；Demo 中用 mock 实现演示流程。
无转码二段：与 SwUploadVideo 的本质区别——普通文件上传完直接拿 value（URL），无需 queryFn 轮询。
pending 期间重复触发会被忽略（防重复上传）；UI 应据 pending 做 disabled / loading 态。