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 ( )
live-demo
只需专注上传逻辑!
友好、易读的 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
取消事件注册