UploadMultiFile 多文件上传

支持多种文件类型上传的组件,可限制文件类型、数量和大小。

安装

npm
yarn
pnpm
bun
deno
npx shadcn@latest add https://codebase.anyask.dev/r/upload-multi-file.json

基础用法

import { UploadMultiFile } from '@/components/UploadMultiFile';

function Demo() {
  const [value, setValue] = useState([]);

  return (
    <UploadMultiFile
      value={value}
      onChange={setValue}
    />
  );
}

限制文件类型

function Demo() {
  return (
    <UploadMultiFile
      value={value}
      onChange={setValue}
      allowedTypes={['pdf', 'excel']}
    />
  );
}

自定义限制

function Demo() {
  return (
    <UploadMultiFile
      value={value}
      onChange={setValue}
      allowedTypes={['image']}
      maxCount={5}
      fileSize={2}
    />
  );
}

自定义按钮文案和帮助信息

function Demo() {
  return (
    <UploadMultiFile
      value={value}
      onChange={setValue}
      buttonText="选择文件"
      help="支持上传 PDF、Excel 格式文件,单文件不超过 10M"
    />
  );
}

下载模板功能

function Demo() {
  return (
    <UploadMultiFile
      value={value}
      onChange={setValue}
      downloadTemplateSceneCode="template_001"
      downloadTemplateFileName="模板.xlsx"
      downloadButtonText="下载模板"
    />
  );
}

API

UploadMultiFileProps

属性说明类型默认值
value文件列表UploadFileInfo[]-
onChange变化回调(value: UploadFileInfo[]) => void-
allowedTypes允许的文件类型FileType[]['all']
maxCount文件最大个数number10
fileSize文件大小限制(单位 M)number10
onUploading是否上传中的回调(uploading: boolean) => void-
buttonText自定义按钮文案string'上传文件'
help自定义帮助信息ReactNode-
downloadTemplateSceneCode下载模板的场景代码string-
downloadTemplateFileName下载模板的文件名string-
downloadButtonText下载按钮的文案string'下载模板'

继承 Ant Design Upload 组件的其他属性(除 valueonChangeaccept)。

FileType

type FileType = 'image' | 'pdf' | 'excel' | 'word' | 'all';

UploadFileInfo

属性说明类型
fileHash文件 hashstring
fileName文件名string

FILE_TYPE_CONFIGS

预定义的文件类型配置:

类型MIME 类型扩展名显示名称
imageimage/jpeg, image/png.jpg, .jpeg, .png图片
pdfapplication/pdf.pdfPDF
excelapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel.xlsx, .xlsExcel
wordapplication/vnd.openxmlformats-officedocument.wordprocessingml.document, application/msword.docx, .docWord
all--所有文件