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 相关文章推荐
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
关于crontab的使用详解
2013/06/24 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
php类的定义与继承用法实例
2015/07/07 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
自己的js工具 Event封装
2009/08/21 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
js 上传图片预览问题
2010/12/06 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
js实现上传图片预览的方法
2015/02/09 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
在Django中使用Sitemap的方法讲解
2015/07/22 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
初中音乐教学反思
2014/01/12 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
2019各种保证书范文
2019/06/24 职场文书
Python字符串的转义字符
2022/04/07 Python