Upload 上传
选择或拖入文件,带校验、并发、进度、暂停、重试的上传队列。
useUploadQueue 只管队列:并发数、状态(等待 / 上传中 / 校验中 / 完成 / 失败 / 已拒绝 / 已暂停)、进度和速度、暂停继续、重试、取消。真正的上传由你的 uploader 做:报告进度,响应 signal 取消,返回的结果交给 onDone。不传 uploader 时是模拟上传,方便做原型。
add(files, rules) 先按 accept、maxSize、maxCount 校验,不合格的直接是「已拒绝」并写明原因。
安装
pnpm dlx shadcn@latest add https://docs.linasan.cn/r/upload.json第一次装本站的组件前先在项目里执行一次 shadcn init,详见 安装。
用法
import { Dropzone, UploadFileList } from '@/components/upload/upload';
import { useUploadQueue } from '@/components/upload/use-upload-queue';
const q = useUploadQueue({ uploader: (file, onProgress, signal) => upload(file, onProgress, signal) });
<Dropzone onFiles={(files) => q.add(files.map((file) => ({ name: file.name, size: file.size, file })), rules)} />
<UploadFileList items={q.items} onRetry={q.retry} onRemove={q.remove} />示例
图片墙与头像
ImageWall 九宫格上传图片,AvatarUpload 换头像。
JPG 或 PNG,至少 200×200
任务面板
UploadTaskPanel 是右下角浮动的上传任务面板(这里用 floating={false} 放在页面里),显示总进度和剩余时间。
安装其余部分
pnpm dlx shadcn@latest add https://docs.linasan.cn/r/image-wall.json第一次装本站的组件前先在项目里执行一次 shadcn init,详见 安装。
头像上传是 avatar-upload,任务面板是 upload-task-panel。
属性
useUploadQueue
属性
类型
Dropzone
属性
类型
UploadFileList
属性
类型