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

公告

Posted on 2019-09-23 10:02 我是菜鸟我是猿阅读(490) 评论(0) 编辑收藏举报

前言

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

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

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

分片上传

原理

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

实现

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, '上传失败');
        }

    }

下载限速

原理

通过每秒限制输出的字节
关闭 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 已经说完，大应该了解怎么实现分片上传了吧，希望对大家有帮助，因为大文件上传和下载是实现中经常遇到的事情

原文地址：https://learnku.com/articles/31108

刷新页面返回顶部

波阿伯的博）#（

还没过完这一生不知道拥有什么才算是巅峰

公告