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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
Vue 进阶之路(三)
Apr 18 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实现异步调用方法研究与分享
2011/10/27 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP防盗链代码实例
2014/08/27 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
Python实现数据库并行读取和写入实例
2017/06/09 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Python中的Numpy矩阵操作
2018/08/12 Python
tensorflow多维张量计算实例
2020/02/11 Python
深入了解python列表(LIST)
2020/06/08 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
爱的奉献演讲稿
2014/09/10 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
安全守法证明
2015/06/23 职场文书
生日赠语
2015/06/23 职场文书
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL