Electron中实现大文件上传和断点续传功能


Posted in Javascript onOctober 28, 2018

Electron官网的描述:Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。

从官网的描述我们可以简单的概括,Electron是开源的框架,可以使用h5来开发跨平台pc桌面应用,这样前端开发这可以开发桌面应用了。由于它是基于Chromium和Node.js开发的,所以在Electron中既可以使用浏览器中的api也可以使用node的api。

下面我们在Electron中实现文件的上传以及断点续传。网上关于h5的上传下载的案例已经非常多,但是关于大文件的上传和续传的很少。

首先上传方案,我们通过将大文件进行分片处理,将大文件切割成固定大小的分片。通过node的fs.createReadStream方法实现:

singleUpload function(file){
  let path = file.path; //文件本地路径 
  let stats = fs.statSync(path);//读取文件信息
  let chunkSize = 3*1024*1024;//每片分块的大小3M
  let size = stats.size;//文件大小
  let pieces = Math.ceil(size / chunkSize);//总共的分片数 
  function uploadPiece (i){ 
    //计算每块的结束位置
    let enddata = Math.min(size, (i + 1) * chunkSize);
    let arr = [];
    //创建一个readStream对象,根据文件起始位置和结束位置读取固定的分片
    let readStream = fs.createReadStream(path, { start: i * chunkSize, end: enddata-1 });
      //on data读取数据
      readStream.on(‘data‘, (data)=>{
        arr.push(data)
      }) 
      //on end在该分片读取完成时触发
      readStream.on(‘end‘, ()=>{
        //这里服务端只接受blob对象,需要把原始的数据流转成blob对象,这块为了配合后端才转
        let blob = new Blob(arr)
        //新建formdata数据对象
        var formdata = new FormData();
        let md5Val = md5(Buffer.concat(arr));
        formdata.append("file", blob);
        console.log(‘blob.size‘,blob.size)
        formdata.append("md5", md5Val);
        formdata.append("size", size + ‘‘); // 数字30被转换成字符串"30"
        formdata.append("chunk", i + ‘‘);//第几个分片,从0开始
        formdata.append("chunks", pieces + ‘‘);//分片数
        formdata.append("name", name);//文件名
        post(formdata)//这里是伪代码,实现上传,开发者自己实现
  }
}

以上代码就是上传的核心部分,我们首先读取文件的基本信息,如路径,大小进行分块,然后将每块上传,我们上传循环上传整个文件的分片,就循环调用uploadpiece方法。那么我们怎么实现断点续传呢?上面的代码中我们计算每块的md5值,这里计算每个md5值就是为了断点续传使用。我们每次上传文件前,我们会先调用预上传接口,预上传接口中,前端传入fileId,后端会将改文件已经上传的分块的md5数组传给前端,前端将该文件的分块的md5值和后端返回的md5值进行逐个对比,跳过已经上传的分块。这样就实现了大文件的上传和断点续传的问题。

方案流程图:

Electron中实现大文件上传和断点续传功能

总结

以上所述是小编给大家介绍的Electron中实现大文件上传和断点续传功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
自动最大化窗口的Javascript代码
May 22 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 #Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 #Javascript
深入浅析javascript函数中with
Oct 28 #Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 #Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 #Javascript
javascript中函数的写法实例代码详解
Oct 28 #Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 #Javascript
You might like
二招解决php乱码问题
2012/03/25 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
详解django中自定义标签和过滤器
2017/07/03 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Python编写单元测试代码实例
2020/09/10 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
一夜的工作教学反思
2014/02/08 职场文书
公司经理聘任书
2014/03/29 职场文书
公司授权委托书样本
2014/09/15 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
公司岗位说明书
2015/10/08 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android