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 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
Vue组件开发初探
Feb 14 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 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 破解防盗链图片函数
2008/12/09 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
php格式化电话号码的方法
2015/04/24 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
php中序列化与反序列化详解
2017/02/13 PHP
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
解决Django中多条件查询的问题
2019/07/18 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python