📄 File-Slice-Upload
快速开始
1. 安装
npm install file-slice-upload
yarn add file-slice-upload
2. 使用 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()
在线demo
- live-demo-原生
-
live-demo-react
demo源码: github
🔥🔥🔥 特点
- 只需专注上传逻辑!
- 友好、易读的 api
.start() .cancel()
- 支持事件
start finish stop progress error, 降低代码耦合
- 轻量
- 使用 typescript 编码, 类型提示良好
API文档
默认导出
FileSliceUpload类的工厂函数，返回 FileSliceUpload 实例
-
factory(chunkSize) => FileSliceUpload
| 参数名 |
类型 |
必传 |
说明 |
| chunkSize |
int |
false |
分片大小(BYTE), 默认值1024 * 1024(1MB) |
FileSliceUpload 类
方法列表
-
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 取消事件注册
