Node+H5实现大文件分片上传(有源码)

1treeS 发布于2019-08-20 15:29 / 3264人阅读

摘要：话前上传大文件上传的教程网上很多但是大部分没给出一个比较完整的出来这个博客给出的是前后端一套完整的解决方案其中前端没有使用第三方上传库希望能帮到有同样需求的朋友们大文件分片上传的好处在这里就不用多说了之前不管是上传单文件还是分片文件上传都是

话前

上传大文件上传的教程网上很多, 但是大部分没给出一个比较完整的出来, 这个博客给出的是前后端一套完整的解决方案, 其中前端没有使用第三方上传库, 希望能帮到有同样需求的朋友们.

大文件分片上传的好处在这里就不用多说了, 之前不管是上传单文件还是分片文件上传都是依靠Flash来实现, 现在H5能原生支持, 而且性能要比Flash高很多, 所以正好公司的一个需求就是要分片上传, 借机分享给大家

分片上传的思路如下:

第一步:先对文件进行MD5的加密, 这样有两个好处, 即可以对文件进行唯一的标识, 为秒传做准备, 也可以为后台进行文件完整性的校验进行比对

第二步:拿到MD5值以后, 要查询一下, 这个文件是否已经上传过了, 如果上传过了, 就不用再次重复上传, 也就是能够秒传, 网盘里的秒传, 原理也是一样的

第三步:对文件进行切片, 假如文件是500M, 一个切片大小我们定义为50M, 那么整个文件就为分为100次上传

第四步:向后台请求一个接口, 接口里面的数据是该文件已经上传过的文件块, 为什么要有这个请求呢? 我们经常用网盘, 网盘里面有续传的功能, 一个文件传到一半, 由于各种原因, 不想再传了, 那么再次上传的时候, 服务器应该保留我之前上传过的文件块, 跳过这些已经上传过的块, 再次上传其他文件块, 当然续传方案有很多, 目前来看, 多带带发一次请求, 这样效率最高

第五步:开始对未上传过的块进行POST上传

第六步:当上传成功后, 通知服务器进行文件的合并, 至此, 上传完成!

为了直观起见, 我画了一个流程图

最终前端的效果图

后端的最终文件目录结构

下面我们说下主要的代码

GIF图里的校验文件就是对文件进行MD5+拿这个MD5值, 看下文件是否已经上传

对文件的MD5小文件还好, 大文件的话会比较慢, 经我测试, 4G的文件, MD5的时间大约在2分钟

对文件进行MD5, 我们使用的是spark-md5, 因为这步是浏览器来做, 所以需要引入这个js

因为MD5的大文件时间比较长, 所以要和GIF图一样, 做成带进度的, 这样就需要把文件进行分片的MD5, spark也支持这种方式, 最终的MD5值为spark.end()

和服务器校验文件的ajax请求, 需要传递文件名称和文件的MD5值

Node端会处理两件事件, 1.看文件是否存在 2.文件不存在, 返回已上传文件块的list, 文件没上传过, 则list为空

下面我们会对文件进行切片处理(File的API提供slice操作), 序号0-n, (服务器存储的文件形式也是MD5作为文件夹名, 0-n为文件名, 如上面那张服务器结果所示), 然后循环每个分片, 和上面的服务器返回的List做比对, 未在List上的文件进行上传

前端代码:

node端代码

最后一步, 当所有文件都上传完成, 告知Node端合并文件

前端代码

Node端代码

最后上源码: 点击跳转GitHUb

服务器托管 idc机房托管 h5源码怎么上传到云服务器 h5 js 文件上传 php实现上传文件 ajax实现文件上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82282.html

优化Recorder H5录音：可边录边转码上传服务器，支持微信提供Android IOS Hybr

摘要：开源库随着支持功能的增多，音频转码处理效率渐渐的跟不上需求了，近期抽时间对音频转码部分进行了升级优化，以支持更多实用的功能。基于以上两点问题，似乎只有多线程能够解决。 Recorder H5 GitHub开源库随着支持功能的增多，音频转码处理效率渐渐的跟不上需求了，近期抽时间对音频转码部分进行了升级优化，以支持更多实用的功能。另外IOS的Hybrid App也完成了移植，Android...

CrazyCodes 2019-08-26 11:01 评论0 收藏0
分片上传与断点续传解决方案

摘要：所以，该文适合于全栈工程师，至少是想成为还有，为什么需要分片，不分片能实现断点续传吗分片是为了充分利用网络带宽，加快上传速度不分片也是能够实现断点续传的。详细参考文件上传组件深度剖析分片上传与断点续传之间没有很直接的关系好了，进入正题。上传文件，基本上是每一个网站应用都会具备的一个功能。对于一个网络存储应用，对于上传功能要求更是迫切。如今市面上成熟上传插件，如WebUpload...

includecmath 2019-08-21 14:27 评论0 收藏0
基于Node.js的大文件分片上传

摘要：基于的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。所以把文件名称加上。后续延伸断点续传多文件多批次上传基于Node.js的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。同时如...

Genng 2019-08-30 11:13 评论0 收藏0