- 使用 npm 安装
npm install file-slice-upload
- 使用 yarn 安装
yarn add file-slice-upload
import fileUpload from 'file-slice-upload'
fileUpload(1024 * 1024)
.setFile(youFile)
.setAjax(async({chunk, md5})=>{
const success = await postChunkFile(chunk, md5)
return success /* 返回 true 将会上传下一个文件碎片 */
})
.start()
- live-demo-原生
- live-demo-react demo源码: github
- 只需专注上传逻辑!
- 友好、易读的 api
.start()
.cancel()
- 支持事件
start
finish
stop
progress
error
, 降低代码耦合 - 轻量
- 使用 typescript 编码, 类型提示良好
FileSliceUpload
类的工厂函数,返回 FileSliceUpload
实例
factory(chunkSize)
=>FileSliceUpload
参数名 | 类型 | 必传 | 说明 |
---|---|---|---|
chunkSize | int | false | 分片大小(BYTE), 默认值1024 * 1024(1MB) |
方法列表
setFile(file)
=>this
参数名 | 类型 | 必传 | 说明 |
---|---|---|---|
file | File | true | 分片上传的文件 |
fileUpload.setAjax(ajax)
=>this
参数名 | 类型 | 必传 | 说明 |
---|---|---|---|
ajax | ({chunk: File, index: number, md5: string, all: number}) => Promise<boolean> |
true | 上传文件碎片的函数,该函数被调用返回true就上传下一个碎片 |
fileUpload.start()
开始上传fileUpload.cancel()
取消上传fileUpload.on(eventName, cb)
=>this
监听上传事件
eventName | 说明 | cb函数类型 |
---|---|---|
start | 开始上传 | () => void |
finish | 上传完成 | ({ file: File, chunkSize: number, md5: string, all: number }) => void |
cancel | 取消上传 | () => void |
progress | 上传进度 | `({done: number, all: number, type: 'md5' |
chunk-uploaded | 分片上传成功 | ({chunk: File, index: number, file: File, md5: string}) => void |
error | 上传失败 | () => void |
-
fileUpload.getFile()
=>file
获取原始完整文件 -
fileUpload.off(eventName, cb)
=>this
取消事件注册