Easeupload NPM

📄 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
        )
    )
  )
})

🔥🔥🔥 特点

简单
自由
轻量
类型提示良好

API文档

默认导出

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

Upload 参数

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

返回值

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

addListener

可监听事件

progress

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

change

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

changeFinish

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