大文件传输解决方案:分片上传 / 下载限速

前言

不少项目中会遇到上传下载视频、更新包、应用程序等文件,此类文件的共同点就是十分巨大,我在项目中遇到过4G左右的文件同时100多台机器下载,此时如果用post上传和下载想一下都不可能,但百度查的话都是说调整php.ini的post的限制,但这是一个可笑的解决方法,由此就需要用另一种解决方法 -- 分片上传和下载限速

在此带大家用php实现一下,各种语言和框架同时适用,本次用到的是php的 laravel,语言和实现的思路是一样的

如果项目中用到的分片上传,个人建议找相对应的包如(AetherUpload-Laravel)、有条件直接用7牛云、阿里云等大公司的分片上传服务

分片上传

原理

  1. 将需要上传的文件按照一定的分割规则,分割成相同大小的数据块;
  2. 初始化一个分片上传任务,返回本次分片上传唯一标识;
  3. 按照一定的策略(串行或并行)发送各个分片数据块;
  4. 发送完成后,服务端根据判断数据上传是否完整,如果完整,则进行数据块合成得到原始文件。

实现

h5

h5实现部分,h5部分实现了把文件的分割,在上传中,告诉服务端文件的总片数和当前是第几片,各个临时文件通过http请求发送出去

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #progress{
            width: 300px;
            height: 20px;
            background-color:#f7f7f7;
            box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
            border-radius:4px;
            background-image:linear-gradient(to bottom,#f5f5f5,#f9f9f9);
        }

        #finish{
            background-color: #149bdf;
            background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
            background-size:40px 40px;
            display: inline-block;
            height: 20px;
        }
        form{
            margin-top: 50px;
        }
    </style>
</head>
<body>
<p id="progress">
    <span id="finish" style="width: 0%;" progress="0"></span>
</p>
<form action="">
    <input type="file" name="file" id="file">
    <input type="button" value="停止" id="stop">
</form>
<script>
    var fileForm = document.getElementById("file");
    var stopBtn = document.getElementById('stop');
    var upload = new Upload();

    fileForm.onchange = function(){
        upload.addFileAndSend(this);
    }

    stopBtn.onclick = function(){
        this.value = "停止中";
        upload.stop();
        this.value = "已停止";
    }

    function Upload(){
        var xhr = new XMLHttpRequest();
        var form_data = new FormData();
        const LENGTH = 1024 * 1024 *2;
        var start = 0;
        var end = start + LENGTH;
        var blob;
        var blob_num = 1;
        var is_stop = 0

        //对外方法,传入文件对象
        this.addFileAndSend = function(that){
            var file = that.files[0];
            blob = cutFile(file);
            sendFile(blob,file);
            blob_num  += 1;
        }

        //停止文件上传
        this.stop = function(){
            xhr.abort();
            is_stop = 1;
        }

        //切割文件
        function cutFile(file){
            var file_blob = file.slice(start,end);
            start = end;
            end = start + LENGTH;
            return file_blob;
        };

        //发送文件
        function sendFile(blob,file){
            var form_data = new FormData();
            var total_blob_num = Math.ceil(file.size / LENGTH);
            form_data.append('file',blob);
            form_data.append('blob_num',blob_num);
            form_data.append('total_blob_num',total_blob_num);
            form_data.append('file_name',file.name);
            xhr.open('POST','http://vnn-admin.cc/Api/sliceUpload',false);

            xhr.onreadystatechange  = function () {
                if (xhr.readyState==4 && xhr.status==200)
                {
                    console.log(xhr.responseText);
                }

                var progress;
                var progressObj = document.getElementById('finish');
                if(total_blob_num == 1){
                    progress = '100%';
                }else{
                    progress = Math.min(100,(blob_num/total_blob_num)* 100 ) +'%';
                    // console.log(progress);
                    // console.log('分割');
                }
                progressObj.style.width = progress;
                var t = setTimeout(function(){
                    if(start < file.size && is_stop === 0){
                        blob = cutFile(file);
                        sendFile(blob,file);
                        blob_num  += 1;
                    }else{
                        setTimeout(t);
                    }
                },1000);
            }
            xhr.send(form_data);
        }
    }

</script>
</body>
</html>

服务端

服务端接收上传的文件片,并判断是否为最后一块,如果是就合并文件,删除上传的文件块

/**
     * @Desc: 切片上传
     *
     * @param Request $request
     * @return mixed
     */
    public function sliceUpload(Request $request)
    {
        $file = $request->file('file');
        $blob_num = $request->get('blob_num');
        $total_blob_num = $request->get('total_blob_num');
        $file_name = $request->get('file_name');

        $realPath = $file->getRealPath(); //临时文件的绝对路径

        // 存储地址
        $path = 'slice/'.date('Ymd')  ;
        $filename = $path .'/'. $file_name . '_' . $blob_num;

        //上传
        $upload = Storage::disk('admin')->put($filename, file_get_contents($realPath));

        //判断是否是最后一块,如果是则进行文件合成并且删除文件块
        if($blob_num == $total_blob_num){
            for($i=1; $i<= $total_blob_num; $i++){
                $blob = Storage::disk('admin')->get($path.'/'. $file_name.'_'.$i);
//              Storage::disk('admin')->append($path.'/'.$file_name, $blob);   //不能用这个方法,函数会往已经存在的文件里添加0X0A,也就是\n换行符
                file_put_contents(public_path('uploads').'/'.$path.'/'.$file_name,$blob,FILE_APPEND);

            }
           //合并完删除文件块
            for($i=1; $i<= $total_blob_num; $i++){
                Storage::disk('admin')->delete($path.'/'. $file_name.'_'.$i);
            }
        }

        if ($upload){
            return $this->json(200, '上传成功');
        }else{
            return $this->json(0, '上传失败');
        }

    }

下载限速

原理

  1. 通过每秒限制输出的字节
  2. 关闭buffer缓存

实现

public function sliceDownload()
    {

        $path = 'slice/'.date('Ymd')  ;

        $filename = $path .'/'. '周杰伦 - 黑色幽默 [mqms2].mp3' ;

        //获取文件资源
        $file = Storage::disk('admin')->readStream($filename);

        //获取文件大小
        $fileSize = Storage::disk('admin')->size($filename);

        header("Content-type:application/octet-stream");//设定header头为下载
        header("Accept-Ranges:bytes");
        header("Accept-Length:".$fileSize);//响应大小
        header("Content-Disposition: attachment; filename=周杰伦 - 黑色幽默 [mqms2].mp3");//文件名

        //不设置的话要等缓冲区满之后才会响应
        ob_end_clean();//缓冲区结束
        ob_implicit_flush();//强制每当有输出的时候,即刻把输出发送到浏览器\
        header('X-Accel-Buffering: no'); // 不缓冲数据

        $limit=1024*1024;
        $count=0;

        //限制每秒的速率
        while($fileSize-$count>0){//循环读取文件数据
            $data=fread($file,$limit);
            $count+=$limit;
            echo $data;//输出文件
            sleep(1);
        }

    }

大文件传输解决方案:分片上传 / 下载限速 / 断点续传

当你需要更大速度的时候调整$limit的数值即可

总结

至此关于分片上传和下载限速的原理和简单实现Demo已经说完,大应该了解怎么实现分片上传了吧,希望对大家有帮助,因为大文件上传和下载是实现中经常遇到的事情

本作品采用《CC 协议》,转载必须注明作者和本文链接
未经允许禁止转载 -- 苦力小林,
本帖由系统于 4年前 自动加精
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 19

我想问下视频切片上传以后再合并还能播放吗?

4年前 评论

@win 能的,你自己试一下吧

4年前 评论
win 4年前
bbluo 3年前

牛逼,再弄个分解视频流动帧检测就更6了 :+1:

4年前 评论

之前用一个大文件分块上传的前端扩展,可以设置同时上传数,,,设置了默认的 3,后来发现会出现,最后一个块比倒数第二个块先传完,,导致后端以为全部接收完成,,,

4年前 评论
Double-Jin (楼主) 4年前
van23qf 4年前

这里分片上传可以改成异步上传,这里的disk('admin')是哪一种存储文件的方式没看懂

4年前 评论
Double-Jin (楼主) 4年前

仅针对

//              Storage::disk('admin')->append($path.'/'.$file_name, $blob);   //不能用这个方法,函数会往已经存在的文件里添加0X0A,也就是\n换行符

这个地方评论一下,其实是可以用append方法的。追一下源码可以看到append有第三个参数$separator的,默认是PHP_EOL,设置成空string ''就不换行了。源码如下:

  public function append($path, $data, $separator = PHP_EOL)
    {
        if ($this->exists($path)) {
            return $this->put($path, $this->get($path).$separator.$data);
        }

        return $this->put($path, $data);
    }
4年前 评论
Double-Jin (楼主) 4年前
lihuafeng 4年前
windpuller (作者) 4年前

推荐 https://tus.io/https://uppy.io/ ,现成的实现比较优雅的方案。

4年前 评论
Double-Jin (楼主) 4年前

两个问题。

  • 分片不一定是按顺序上传完毕,上面有人也提到了,
  • 如果原文件比较大,合并还是比较费时的。

可以在请求中只做最后一片上传成功的监听,然后异步进行合并,合并的过程中做完整性检查,如果不完整可以等待或重启任务等。

4年前 评论
Double-Jin (楼主) 4年前
liux156

分片下载无效把?
https://stackoverflow.com/questions/304968...

实际上, 我也复制你的代码执行了.
没有任何效果.

$filename = __DIR__ . '/SQLEXPR_x64_CHS.exe';

//获取文件资源
$file = fopen($filename);

//获取文件大小
$fileSize = filesize($filename);

header("Content-type:application/octet-stream");//设定header头为下载
header("Accept-Ranges:bytes");
header("Accept-Length:" . $fileSize);//响应大小
header("Content-Disposition: attachment; filename=SQLEXPR_x64_CHS.exe");//文件名

//不设置的话要等缓冲区满之后才会响应
ob_end_clean();//缓冲区结束
ob_implicit_flush();//强制每当有输出的时候,即刻把输出发送到浏览器\
header('X-Accel-Buffering: no'); // 不缓冲数据

$limit = 1024 * 1024;
$count = 0;

//限制每秒的速率
while ($fileSize - $count > 0) {//循环读取文件数据
    $data  = fread($file, $limit);
    $count += $limit;
    echo $data;//输出文件
    sleep(1);
}
4年前 评论
Double-Jin (楼主) 4年前
liux156

@Double-Jin 说的就是下载限速.

4年前 评论
Double-Jin (楼主) 4年前
liux156 (作者) 4年前
Double-Jin (楼主) 4年前
liux156

@Double-Jin 你看看我贴出来的那个Stack Overflow链接. 我这里出现的问题就是那个.

4年前 评论
liux156

在你的代码中增加两个函数, 才正常运行.

$filename = __DIR__ . '/SQLEXPR_x64_CHS.exe';

//获取文件资源
$file = fopen($filename, "r");
//获取文件大小
$fileSize = filesize($filename);

header("Content-type:application/octet-stream");//设定header头为下载
header("Accept-Ranges:bytes");
header("Accept-Length:" . $fileSize);//响应大小
header("Content-Disposition: attachment; filename=SQLEXPR_x64_CHS.exe");//文件名

//不设置的话要等缓冲区满之后才会响应
ob_end_clean();//缓冲区结束
ob_implicit_flush();//强制每当有输出的时候,即刻把输出发送到浏览器\
header('X-Accel-Buffering: no'); // 不缓冲数据

$limit = 1024 * 1024;
$count = 0;

//限制每秒的速率
while ($fileSize - $count > 0) {//循环读取文件数据
    $data  = fread($file, $limit);

    $count += $limit;
    echo $data;//输出文件
    ob_flush();//增加的.
    flush();     //增加的.
    sleep(1);
}
4年前 评论
Double-Jin (楼主) 4年前

Uncaught TypeError: upload.addFileAndSend is not a function at HTMLInputElement.fileForm.onchange 我的添加文件后没反应,报了这个错,请问怎么回事呢? 代码是复制的,只替换了api接口,下面的都有。 fileForm.onchange = function(){ upload.addFileAndSend(this); };

//对外方法,传入文件对象 this.addFileAndSend = function(that){ var file = that.files[0]; blob = cutFile(file); sendFile(blob,file); blob_num += 1; };

3年前 评论

插眼,这个以后估计会用到

3年前 评论
zhanghaidi

都是大佬呀。话说前端怎么实现视频分割呀?

3年前 评论
Double-Jin (楼主) 3年前
raybon 3年前

你这是 下载已有的文件,动态生成的数据 如何导出下载呢?

3年前 评论
Double-Jin (楼主) 3年前
巴啦啦小仙女 (作者) 3年前
Double-Jin (楼主) 3年前
晨雨零稀 3年前
Double-Jin (楼主) 3年前

Storage::append($path.'/'.$file_name, $blob,null)传入第三个参数就不会有问题

2年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!