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图片预加载技术(详细演示)
Mar 12 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
js使用formData实现批量上传
Mar 27 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 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
体育彩票排列三组选三算法分享
2014/03/07 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
google 搜索框添加关键字实现代码
2010/04/24 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
理解javascript async的用法
2017/08/22 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
彪马法国官网:PUMA法国
2019/12/15 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
什么是继承
2013/12/07 面试题
体育教师自荐信范文
2013/12/16 职场文书
一年级评语大全
2014/04/23 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js