javascript之分片上传,断点续传的实际项目实现详解


Posted in Javascript onSeptember 05, 2019

总所周知,上传大文件时由于各种原因突然中断,然后整个文件需要从头开始上传,这种情况非常令人抓狂??,那么怎样才可以避免这种尴尬的情况呢?分片上传或许可以搞定这个痛点

原理:文件上传就是把文件切割成一个个小小的块,然后块逐一上传

后台约定接口:

1.getRestChunkInfo 获取当前文件的上传情况

输入:{fileName, fileSize, md5, token}

输出:{chunk_list, chunk_size, chunk_count}

chunk_list是一个数组,未上传块的编号等信息,

chunk_size:分片的大小,

chunk_count:分片的总次数,

2.uploadAPI

输入:FormData对象,块的具体信息

{file_name, file_size, file_md5, token}

输出:一个对象,包含true/false

步骤:

1.获取需要上传的文件,用md5算法做消息摘要,就是md5码作为文件的唯一标识

2.将md5码、文件名、文件大小、token值作为输入参数传给后台第一个API

3.接口返回chunk_list等参数,用chunk_list.shift取分片继续调用第二个接口,一片一片上传文件块

4.所有文件上传完成后,为了防止中间有出错的分片,在次请求第一个接口,如果chunk_list的length为0,则说明所有分片上传成功

完成上面的步骤后,后台在确认所有的分片上传完成后,就可以进行文件合并了。

图解:

javascript之分片上传,断点续传的实际项目实现详解

其中token值不是必传参数,仅仅是系统为了防止CSRF攻击,出于安全考虑的。Note:安全考虑还有加签验签功能

难点:

1.如何切片,使用Blob对象的slice方法  blob.slice(startByte,endByte);

2.当前文件已上传的片数,然后保证我从哪一片开始上传

以上就是本次介绍的关于javascript之分片上传,断点续传的实际项目实现的全部知识点内容,有需要的朋友们可以学习下。

Javascript 相关文章推荐
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 #Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 #Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 #Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 #Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 #Javascript
layui table数据修改的回显方法
Sep 04 #Javascript
Vue实现商品详情页的评价列表功能
Sep 04 #Javascript
You might like
php session和cookie使用说明
2010/04/07 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP分页类集锦
2014/11/18 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
小区停车场管理制度
2014/01/27 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
企业标语口号
2014/06/10 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers