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 相关文章推荐
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
详解JS函数重载
Dec 04 Javascript
理解javascript正则表达式
Mar 08 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
python基础梳理(一)(推荐)
2019/04/06 Python
Django中的cookie和session
2019/08/27 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
超市开学活动方案
2014/03/01 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
打架检讨书
2015/01/27 职场文书
公司员工辞职信范文
2015/05/12 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python