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 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
深入了解JavaScript词法作用域
Jul 29 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自定义函数返回多个值
2006/11/26 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
在Python中使用SQLite的简单教程
2015/04/29 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
对python周期性定时器的示例详解
2019/02/19 Python
PyQt5实现简易计算器
2020/05/30 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
python SVM 线性分类模型的实现
2019/07/19 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
学雷锋树新风演讲稿
2014/05/10 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
婚礼父母答谢词
2015/01/04 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
Python Django获取URL中的数据详解
2021/11/01 Python