plupload-antd-react大文件分片上传组件使用

介绍

• 使用antDesign实现组件样式，与其Upload组件样式相似
• 实现文件大小、上传类型、切片大小等属性的自定义
• 支持返回上传成功的文件文件列表
• 支持文件回显以及回显后的其他操作（编辑/详情功能的回显）

效果展示

选择文件后立即自动上传

选择文件后手动触发上传

应用

安装

npm i plupload-antd-react

引入

import BigFilePLUpload from 'plupload-antd-react'

使用

// 立即上传
<BigFilePLUpload
  autoUpload={true}
  buttonSelect={'上传文件'}
  getFileList={(backFileList) => {
      // console.log(backFileList);
  }}
  defaultFileList={fileList}
  chunk_size={'10kb'}
  maxSize={'5M'}
  maxLength={5}
  multipart_params={{
		fileType: 'video',
        fileDir: 'education/resourceBank',
  }}
  accept={'png'}
  url={`https://www.****.cn/upload/file/plUpload`}
/>
// 手动上传
<MyPlUpload
    autoUpload={false}
    buttonSelect={'选择文件'}
    buttonUpload={'上传文件'}
    getFileList={(fileList) => {
        console.log(fileList);
    }}
    defaultFileList={fileList ? fileList : []}
    chunk_size={'10kb'}
    maxSize={'5M'}
    maxLength={5}
    accept={'png'}
    url={`https://www.****.cn/upload/file/plUpload`}
/>

参数说明

组件参数

参数	类型	说明
autoUpload	boolean	必传。true表示选择文件后立即上传，false表示添加文件与上传文件分步进行
buttonSelect	string	添加按钮（autoUpload为false时）/上传按钮（autoUpload为true时）的显示文字，默认显示为 select
buttonUpload	string	上传按钮（autoUpload为false时）的显示文字，默认显示为upload
getFileList	function	上传组件返回的最终的文件列表
defaultFileList	array	回显的文件列表
chunk_size	string/number	分片的大小。传数字时 单位默认为字节，建议传带单位的字符串
maxSize	string	单个文件size的最大限制，传带单位的字符串
maxLength	number	上传文件的个数限制
multipart_params	object	上传接口额外的传参
accept	string	上传文件的类型限制
url	string	上传文件的接口地址

回显参数

• defaultFileList （以下参数均为必传）

参数	类型	说明
id	string/number	每个文件的唯一标识
name	string	回显的文件名
url	string	回显的文件地址
uploaded	boolean	固定为true，表示为回显列表
response	boolean	固定为true，表示为回显列表