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 相关文章推荐
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
Vue组件实现触底判断
Jun 26 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
JS模块与命名空间的介绍
2013/03/22 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
火锅店的活动方案
2014/08/15 职场文书
公司领导班子对照材料
2014/08/18 职场文书
活动总结新闻稿
2014/08/30 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL