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 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
Vue.js的动态组件模板的实现
Nov 26 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
使用 php4 加速 web 传输
2006/10/09 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
php通过各种函数判断0和空
2020/07/04 PHP
Smarty模板配置实例简析
2019/07/20 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
javascript 表单的友好用户体现
2009/01/07 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
Python实现的简单模板引擎功能示例
2017/09/02 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Python requests库用法实例详解
2018/08/14 Python
python感知机实现代码
2019/01/18 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Python版中国省市经纬度
2020/02/11 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
梅花魂教学反思
2014/04/25 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
护士实习自荐信
2015/03/06 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android