大文件视频断点续传插件resumable.js,优化上传速度,缩短最后一片等待时长。...

本文针对resumable.js在Angular应用中上传大视频时的问题进行了优化。通过调整配置参数,如'chunkSize'、'simultaneousUploads'等,并分析forceChunkSize属性的影响,有效缩短了上传时间。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在angular中使用resumable.js遇到的一个问题:大视频上传到99-100%时,此时正在上传最后一片,最后一片的xhr一直是pending状态。原因插件会检查第一片和最后一片的元数据,检测到最后一片后所有片发送完后要组装,要耗时,完成后才返回response,所以导致到了最有一片是 要等待一段时间,可能5秒到10分钟之间。机器性能越好等待时间越短。读了源码把设置做如下更改:

                        'chunkSize': 3*1024*1024,
                        'simultaneousUploads': 5,
                        'prioritizeFirstAndLastChunk': true,
                        'method': 'octet',
                        'fileType': ['avi', 'mov', 'asf', 'wmv', 'navi', '3gp', 'rmvb', 'mkv', 'flv', 'mpg', 'mpeg2', 'mpeg4', 'mp4', 'ts']

 可能有人加了forceChunkSize:true.这个是强制把片控制在设置的chunkSize范围内,插件默认为false。

     var round = $.getOpt('forceChunkSize') ? Math.ceil : Math.floor;
        var maxOffset = Math.max(round($.file.size/$.getOpt('chunkSize')),1);
        for (var offset=0; offset<maxOffset; offset++) {(function(offset){
            window.setTimeout(function(){
                $.chunks.push(new ResumableChunk($.resumableObj, $, offset, chunkEvent));
                $.resumableObj.fire('chunkingProgress',$,offset/maxOffset);
            },0);
        })(offset)}

此时每片的大小在0-2*trunkSize 之间,官方是建议这样干的,有利于检查最后一片。

我对比过将forceChunkSize设置true和false是的上传耗时,设置为true时反而耗时更长,所以不建议加这个属性,使用默认的就可以了。

至于片的大小和同时上传片个数,官方建议是1MB  5片。

通过自己的对比分析,建议设置为3MB 5片。

第一张图是记录的数据,后面的额趋势图是处理过数据的折线图。当设置为3MB 5片是收益比较高。对于片数的设置建议至少两片,测试中3片和5片基本无区别。

同时片大小和片数和机器性能和网速也成正比,可根据实际情况做调整。

通过读源码和测试对比,总结,做出如上修改,实际上传大文件的时长有明显的缩短,贴出来供需要的小伙伴参考。

转载于:https://www.cnblogs.com/bagexiaowenti/p/8569298.html

现在大部分的网站使用的是标准HTML的上传方式来上传文件。一般情况下标准HTML方式在网页中只能上传4MB左右的文件,如果访问的用户比较多的时侯这种方式容易上传失败。虽然标准HTML上传方式开发起来比较简单,但是这种方式用户体验比较差,上传的文件大小受到限制,所以如果我们需要上传上百或者更大的上G的文件时,HTML标准上传方式是无法满足我们的需求的。 而另一方面,随着互联网行业的发展用户产生的新的需求也越来越多,同时对用户体验也提出了更高的要求,传统的HTML方式也越来越难已满足新的用户需求。现在大部分的用户有文件批量上传的需求,希望只通过点击一次鼠标就能够批量的上传多张图片,而不是一张张的选择文件上传,这样操作即浪费时间又非常烦琐。 近年来,由于数码和影视行业的迅猛发展刺激了用户对大文件上传需求,现在越来越多的用户希望能够通过WEB的方式上传更大的文件,比如电影和图片。这些类型的文件通常都非常大,一般都在500MB以上,高清的影视文件至少在1G以上。这样的大文件是根本无法通过标准HTML方式来上传的。 不仅如此,由于国内网络环境比较特殊,有许多地区的网络不够稳定,在上传文件的过程中可能会发生断网的情况。如果用户正在上传一个1000MB的文件,已经上传了500MB,这时网络出现问题上传中止了。那么下一次用户需要要重新上传前面的500MB,而不是从500MB开始上传,这将浪费用户的许多时间。 新颖网络HTTP文件断点续传控件是专门用于解决HTTP大文件上传的需求而开发的产品。通过我们的HttpPartition模块用户能够非常方便的一次性选择超过200个的文件。而且我们升级了用户体验,用户现在不仅能够通过点击按钮来选择多个文件,还可以通过HttpDroper来拖拽文件甚至是文件夹。 现在我们能够轻松支持2G左右的大文件上传。为了减轻服务器的压力在HttpUploader模块中我们并不是一次上传2G的数据,而是将2G化分为小的数据块,每次向服务器上传约128KB左右的数据。同时在每次上传的数据中附带了文件大小,起始位置,文件MD5等信息。对于开发人员来说,有了这些信息,断点续传功能将会变的和普通的文件上传功能一样简单。 相信新颖网络HTTP断点续传控件能够帮助您赢利市场。 产品介绍:[url=http://www.cnblogs.com/xproer/archive/2012/02/17/2355440.html][/url]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值