📄 easeupload

快速开始

1. 安装

• 使用 npm 安装

npm install easeupload

• 使用 yarn 安装

yarn add easeupload

• 使用 pnpm 安装

pnpm add easeupload

2. 使用 easeupload 上传文件切片

import Upload from 'easeupload'
const { show, addListener, start } = Upload({
  fileType: ['.zip'], // 文件类型
  chunkSize: 3, // 分片的大小
  concurrent: 1 // 并发请求数
})

addListener('progress', num => {
  // TODO
})

addListener('changeFinish', ({ file, fileSize, resolve }) => {
  const controller = new AbortController()

  resolve<[]>(chunks =>
    chunks.map(
      chunk => () =>
        uploadSystemInfoApi(
          {
            file: new File([chunk.file], file.name),
            dzuuid: chunk.id,
            dzchunkindex: chunk.index,
            dztotalfilesize: chunk.allSize,
            dzchunksize: chunk.size,
            dztotalchunkcount: chunk.chunksNum,
            dzchunkbyteoffset: chunk.offset
          },
          controller.signal
        )
    )
  )
})

🔥🔥🔥 特点

1. 简单
2. 自由
3. 轻量
4. 类型提示良好

API文档

默认导出

upload函数，返回 show、 addListener、start 函数

1. Upload 参数

参数名	类型	必传	说明
config	{ fileType: string[]; chunkSize: number;concurrent: number;}	true	fileType： 可选择文件类型的数组 chunkSize： 分片的大小（MB） concurrent：并发上传数

2. 返回值

返回值	类型	说明
show	（） => void	调用显示选择文件的弹窗
addListener	（eventName： 'progress' | 'change'| 'changeFinish'，handleFn）	增加监听
start	（） => void	开始上传
cancel	（） => void	取消上传

addListener

可监听事件

1. progress

事件名	参数类型	说明
progress	number	上传的进度（已经上传完成的切片 / 总切片数）

2. change

事件名	参数	说明
change	undefined	选择文件后触发

3. changeFinish

事件名	参数	说明
changeFinish	({ file: File, fileSize: string, resolve: (createTaskList: (chunks: Chunk[]) => Task[]) => void })	在文件的hash值和切片的hash计算完毕后触发，必须增加此监听，调用resolve函数，自定义切片上传的请求字段名，使用封装axios，拦截器依旧生效