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的一种模块模式
Sep 08 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 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处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
Python map及filter函数使用方法解析
2020/08/06 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
美国羊皮公司:Overland
2018/01/15 全球购物
公司担保书范文
2014/05/21 职场文书
企业法人代表任命书
2014/06/06 职场文书
欢迎标语大全
2014/06/21 职场文书
以权谋私检举信范文
2015/03/02 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
七年级作文之游记
2019/12/11 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis