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

前言

不少项目中会遇到上传下载视频、更新包、应用程序等文件,此类文件的共同点就是十分巨大,我在项目中遇到过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已经说完,大应该了解怎么实现分片上传了吧,希望对大家有帮助,因为大文件上传和下载是实现中经常遇到的事情

未经允许禁止转载 -- 苦力小林,

本帖由系统于 1周前 自动加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 7

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

1周前 评论

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

1周前 评论
win: 嗯,抽时间试试 1周前
raybon

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

1周前 评论
largezhou

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

1周前 评论
Double-Jin: 发现问题就好了,这东西思路大概就是这样的 1周前
van23qf: 不能简单的按照接收的先后来判断,可以直接让前端来告诉后端是否到了最后一段文件 5天前

这篇文章加精了呀,那在这打个小广告,麻烦各位能到 博客:jin-chat 基于 EasySwoole 和 layim 的聊天系统 (重构 woann-chat) 里的github帮我点个星,我想达到人生能第一个100星项目,希望各位支持下我继续写文章和写各类的demo

1周前 评论

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

6天前 评论
Double-Jin: Laravel文档上有说明 6天前
gotophp

:+1:

4天前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!