|
|
总所周知,上传大文件时由于各种原因突然中断,然后整个文件需要从头开始上传,这种情况非常令人抓狂??,那么怎样才可以避免这种尴尬的情况呢?分片上传或许可以搞定这个痛点. k8 P/ M5 P% `: O
原理:文件上传就是把文件切割成一个个小小的块,然后块逐一上传% l1 C, A3 T) b
后台约定接口:- D9 ?% y% T3 j$ p$ h
1.getRestChunkInfo 获取当前文件的上传情况
+ Q( E3 h- V$ ^' }+ Q k输入:{fileName, fileSize, md5, token}& q, J! T$ \' @+ f
输出:{chunk_list, chunk_size, chunk_count}
4 X, V. G% [7 ?6 Jchunk_list是一个数组,未上传块的编号等信息,
- m% E5 N+ C- [" \/ pchunk_size:分片的大小,, z5 L' c3 r& t
chunk_count:分片的总次数,
& S+ T0 _+ N1 o$ f- n, L9 J2.uploadAPI2 p: q- }2 H+ K4 K
输入:FormData对象,块的具体信息
. V3 H( T, J1 j2 M) j0 Q{file_name, file_size, file_md5, token}
! |2 U8 @2 Z% s/ `" I输出:一个对象,包含true/false1 ^0 [$ `5 a" X( B
步骤:
3 @5 {* S1 g9 o8 k+ ?1.获取需要上传的文件,用md5算法做消息摘要,就是md5码作为文件的唯一标识
h# u. ~% L" D1 M1 R2.将md5码、文件名、文件大小、token值作为输入参数传给后台第一个API6 w! M6 [& E: z4 }' `
3.接口返回chunk_list等参数,用chunk_list.shift取分片继续调用第二个接口,一片一片上传文件块
' a. i3 A5 q# Q: V) F4.所有文件上传完成后,为了防止中间有出错的分片,在次请求第一个接口,如果chunk_list的length为0,则说明所有分片上传成功1 @* E* K; E3 w1 N% O. w7 J
完成上面的步骤后,后台在确认所有的分片上传完成后,就可以进行文件合并了。8 g/ F, }- w+ D; o% J+ r
图解:: D, N' t, n$ v4 E1 t" C. E
% h2 }! R" g7 H
其中token值不是必传参数,仅仅是系统为了防止CSRF攻击,出于安全考虑的。Note:安全考虑还有加签验签功能
/ E; r7 v( E- n1 v6 g4 X s" a$ X3 S难点:
2 o# e/ h( I& D2 B' h1.如何切片,使用Blob对象的slice方法 blob.slice(startByte,endByte);! h, O1 A0 D0 H8 [
2.当前文件已上传的片数,然后保证我从哪一片开始上传* k+ ]7 V: \3 G6 @; x5 c. M
以上就是本次介绍的关于javascript之分片上传,断点续传的实际项目实现的全部知识点内容,有需要的朋友们可以学习下。; H7 b9 X7 Q% r) `! D
4 z& J! z: N. Z- C4 }7 \7 {4 C: z
来源:http://www.jb51.net/article/169316.htm5 Y' E2 d* e: h% e% K) F2 Z
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
×
|