@prequest/uploader

针对多文件、大文件上传提供了一种便捷的方法，来控制同时进行的任务数量、和文件的切片上传。

安装

npm install @prequest/uploader

使用

下面演示了一个 60M 的文件，切片成了 6 份，进行 6 次 HTTP 请求，其中队列中同时上传的任务有 3 个。

import Uploader from '@prequest/uploader'
import { prequest } from '@prequest/xhr'

const Upload = () => {
  const [fileList, setFileList] = useState<File[]>([])
  const uploader = useRef<Uploader | null>(null)

  useEffect(() => {
    uploader.current = new Uploader({
      chipSize: 10 * 1024 * 1024, // 切片大小,10M
      poolLimit: 3, // 同时进行的任务数量
      customFormData(formData, { idx, file, chunk }) {
        // 要上传数据的 formData
        formData.append('name', file.name)
        formData.append('index', `${idx}`)
        formData.append('chunk', chunk)
        return formData
      },
      request(formData, { idx, file, chunk }) {
        // 上传过程
        return prequest.post('/upload', {
          data: formData,
          onUploadProgress(e) {
            console.log(`${file.name} 的第${idx}个分片，已上传:${e.loaded}`)
          },
        })
      },
    })
  }, [])

  async function onSubmit() {
    try {
      // 上传任务
      await uploader.current.upload(fileList)
    } catch (e) {
      console.log('上传文件失败')
    }
  }

  return (
    <div>
      <input type="file" onChange={e => setFileList(e.target.files)} />
      <button onClick={onSubmit}>上传</button>
    </div>
  )
}

参数

配置参数

名称	类型	默认	必填	含义
chipSize	number	10 * 1024 * 1024	否	切片大小
poolLimit	number	3	否	同时上传的任务数量
customFormData	(formData: FormData, opt: CallbackOption) => FormData	默认会将 name, index, chunk 三个字段添加到 formData 中	否	定义要上传的 formData
request	(formData: FormData, opt: CallbackOption) => Promise<Response>		是	定义要上传的请求方法

CallbackOption

名称	类型	含义
idx	number	切片的索引
chunk	Blob	切片文件
file	File	原始文件