断点续传

1、大文件上传文件

简述:web前端开发时我遇到下载大的文件和上传大的文件没有下载视频或者文件就断网或者电脑关机重新开始上传或者下载这个问题的时候 ,我没有思路也不知道如何去处理的时候 搜索了简书、博客、掘金总结如下


  • 文件过大会导致带宽资源紧张,请求速度下降 ;
  • 如果上传过程中服务中断、网络中断 、页面崩溃,可能会导致文件重新开始上传。

在一篇简书中分析的就很有道理:

  • 前端选择文件后上传,后端在处理文件过程中,首先会将文件加载到运行内存中,之后再调用相应的API进行
    写入硬盘内存的操作,完成整个文件的上传。
    但这样直接上传文件,可能会因为某个环节出了问题导致整个流程崩溃,所以大文件直接上传是不可取的。
    解决问题最好办法是分片断点续传,该方式主要是针对大文件(比如100M以上的文件)。
断点?

在文件上传过程中,将一个要上传的文件分成N块,然后使用多线程并发多块上传,因为某种原因导致上传被中断或暂停,此时中断或暂停的位置就成为断点。
前端每上传一片,将会被加载到运行内存中,加载完毕后再写入硬盘,此时运行内存的临时变量会被释放,然后此临时变量会被下一片占用,再进行写入,释放...

续传?

意思是指从中断的位置继续上传剩下的部分文件,而不是从头开始上传。
上传完毕后,在服务端进行合并(合并的操作是在后端进行的,前端只是调用接口,合并的方式是由后端决定的,到底是上传一片就合并一片,或者是上传所有的之后整体进行合并)。

怎么去实现断点续传的实现

1)分片的实现

方式:
html5z之前的方式是flash和activeX
html5提供了文件二进制流进行分割的slice方法。

const chunks = Math.ceil(file.size / eachSize)

文件的分片,一般在2-5M之间。这一步得到了每一片文件的内容、每一块的序号、每一块的大小、总块数等数据。

2)续传的实现
  1. 续传首先要确定需要继续上传的是哪一个文件,而确定一个文件的方式是对文件进行加密,只要某个文件内容发生变化,就需要重新上传。可以对文件进行MD5加密作为文件唯一的标识符,MD5加密是不可逆的。
    要注意:对整个大文件进行加密,可能会导致页面崩溃,需要对文件进行分片加密。
    spark-md5插件支持文件分片加密。
    基于elementUI的spark-md5的使用

  2. 在第一片文件上传之前,需要用文件名称 + 此文件唯一标识符 +当前片数来查询文件是否上传过。通过服务器返回的已经上传的结果,我们可以通过分片的结果获取剩余部分进行上传。如果页面重新加载或者上传中断,只需要在重新上传之前在哪一片中断便可以继续上传。

  3. 在上传完毕后,请求合并接口(合并接口也可以不请求,后端拿到所有文件后自己进行合并),在服务端将文件进行合并,此时整个文件上传结束。

  4. 在上传过程中,可以根据服务器返回的当前上传成功的片数和总片数对前端进度条进行展示。

(以上内容都是别人的我十分的赞同)后面的我就看不懂了 有待提升!!!

总结方法:

前端通过spark-md5.js计算本地文件md5
这里提供了两个方法;

  • 一种是用 SparkMD5.hashBinary( ) 直接将整个文件的二进制码传入直接返回文件的md5、这种方法对于小文件会比较有优势——简单并且速度快。
  • 另一种方法是利用js中File对象的 slice( )方法(File.prototype.slice( ))将文件分片后逐个传入spark.appendBinary( ) 方法来计算、最后通过spark.end( )方法输出结果,很明显,这种方法对于大型文件会非常有利——不容易出错,并且能够提供计算的进度信息
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容

  • 一、前端大文件上传文件的痛点 1、文件过大会导致带宽资源紧张,请求速度下降 ;2、如果上传过程中服务中断、网络中断...
    稻草人_9ac7阅读 8,823评论 0 2
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,564评论 0 11
  • 彩排完,天已黑
    刘凯书法阅读 4,217评论 1 3
  • 表情是什么,我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了,难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 125,020评论 2 7