一文搞懂分片上传和断点续传(代码片段)

〝 古人学问遗无力，少壮功夫老始成 〞

一文搞懂分片上传和断点续传，对于做过文件上传的小伙伴对于这两个名词并不太陌生，而在上传大文件的业务中，这两种上传方式是经常被用到的，但是很多小白对这两种上传的方法的用法还是有点模糊，如果这篇文章能给你带来一点帮助，希望给飞兔小哥哥一键三连，表示支持，谢谢各位小伙伴们。

目录

一、什么是分片上传、断点续传

二、项目地址

三、分片上传实战

四、如何进行切片

五、后端对分片的处理

六、断点续传 

---

一、什么是分片上传、断点续传

•  分片上传：将一个文件切割为一系列特定大小的小数据片，分别将这些小数据片分别上传到服务端，全部上传完后再在服务端将这些小数据片合并成为一个完整的资源。
• 断点续传：在分片上传的过程中，如果因为系统崩溃或者网络中断等异常因素导致上传中断，这时候客户端需要记录上传的进度。在之后支持再次上传时，可以继续从上次上传中断的地方进行继续上传
• 在网络不好，文件很大的情况下可以采用分片上传
• 而因为网络崩溃或者系统中断，可以采用断点续传

二、项目地址

• 该项目已经传到github和gitee上，欢迎大家fork、star、watch三连支持
• github项目地址：https://github.com/autofelix/autofelix-javascript-wiki/tree/master/fcup
• gitee项目地址：https://gitee.com/autofelix/autofelix-javascript-wiki/tree/master/fcup

三、分片上传实战

• 将完整视频切成每一个小片
• 这里我们使用的是jquery.fcup官方切片库
• 完整源代码都在上面的项目地址中
• 前端我们只要引入该切片库，进行以下简单的配置即可

$.fcup(
    upId: 'upid', //上传dom的id
    upShardSize: '1', //切片大小,(单次上传最大值)单位M，默认2M
    upMaxSize: '200', //上传文件大小,单位M，不设置不限制
    upUrl: 'fcup.php', //文件上传接口
    upType: 'jpg,png,jpeg,gif,mp4', //上传类型检测,用,号分割
    //接口返回结果回调，根据结果返回的数据来进行判断，可以返回字符串或者json来进行判断处理
    upCallBack: function (res) 
        var status = res.status;
        var msg = res.msg;
        // 已上传完成
        if (res.status == 2) 
            console.log(msg);
        
        // 还在上传中
        if (status == 1) 
            console.log(msg);
        
        // 接口返回错误
        if (status == 0) 
            // 停止上传并且提示信息
            $.upStop(msg);
        
    ,
    // 上传过程监听，可以根据当前执行的进度值来改变进度条
    upEvent: function (num) 
        // num的值是上传的进度，从1到100
        console.log('当前上传进度：' + num + '%');
    ,
    // 发生错误后的处理
    upStop: function (errmsg) 
        // 这里只是简单的alert一下结果，可以使用其它的弹窗提醒插件
        // alert(errmsg);
    ,
    // 开始上传前的处理和回调,比如进度条初始化等
    upStart: function () 
        alert('开始上传');
    
);

四、如何进行切片

• 在切片库中我们可以看到以下流程
• 第一步：加载配置、获取dom元素、执行fcup_addFileInput方法
• 第二步：其实就是获取上传dom元素的位置然后在该位置加一个透明的文件上传按钮，这样用户在点击dom元素的时候，其实点击的是这个透明的文件上传按钮，弹出上传文件的选项
• 第三步：第二步其实已经初始化完毕，后续操作需要用户点击，触发fcup_upload上传方法
• 第四步：进行切片上传核心代码，设置分片大小、切片，递归通过ajax进行上传

//这是第一步
fcup: function (config) 
        jQuery.extend(config);
        if (jQuery.upId && jQuery.upUrl) 
            jQuery.domHtml = jQuery('#' + jQuery.upId).html();
            jQuery.fcup_addFileInput();
        
    ,

//这是第二步
fcup_addFileInput: function () 
        jQuery.upInputId = jQuery.upId + '_input';
        var C = jQuery('#' + jQuery.upId).attr("class");
        var X = jQuery('#' + jQuery.upId).position().top;
        var Y = jQuery('#' + jQuery.upId).position().left;
        var W = jQuery('#' + jQuery.upId).innerWidth();
        var H = jQuery('#' + jQuery.upId).innerHeight();
        var html = jQuery.domHtml;
        if (C) 
            html += '<input type="file" id="' + jQuery.upInputId + '" class="' + C + '" onchange="jQuery.fcup_upload()" style="position:absolute;left:' + Y + 'px;top:' + X + 'px;opacity:0;z-index:9999;width:' + W + 'px;height:' + H + 'px;">';
         else 
            html += '<input type="file" id="' + jQuery.upInputId + '" onchange="jQuery.fcup_upload()" style="position:absolute;left:' + Y + 'px;top:' + X + 'px;opacity:0;z-index:9999;width:' + W + 'px;height:' + H + 'px;">';
        
        jQuery('#' + jQuery.upId).html(html);
    ,

//这是第三步
fcup_upload: function () 
        var result = '';
        jQuery.upError = '';
        var file = jQuery('#' + jQuery.upInputId)[0].files[0];
        if (!file) 
            return false;
        
        if (typeof jQuery.upStart == 'function') 
            jQuery.upStart();
        
        name = file.name;
        size = file.size;
        index1 = name.lastIndexOf(".");
        if (!jQuery.upShardSize) 
            jQuery.upShardSize = 2;
        
        var fileMD5 = jQuery.get_file_md5(file);
        var index2 = name.length,
            suffix = name.substring(index1 + 1, index2),
            shardSize = jQuery.upShardSize * 1024 * 1024,
            succeed = 0,
            shardCount = Math.ceil(size / shardSize);

        if (jQuery.upType) 
            uptype = jQuery.upType.split(",");
            if (jQuery.inArray(suffix, uptype) == -1) 
                jQuery.upError = '不允许上传的文件类型-' + suffix;
            
        
        if (jQuery.upMaxSize) 
            if (!jQuery.fcup_limitFileSize(file, jQuery.upMaxSize + 'MB')) 
                jQuery.upError = '上传文件过大';
            
        
        if (jQuery.upStatus() == false) 
            return false;
        
        setInterval("jQuery.fcup_upFileInput();",500);
        var re = [];
        var start, end = 0;
        for (var i = 0; i < shardCount; ++i) 
            re[i] = [];
            start = i * shardSize,
                end = Math.min(size, start + shardSize);
            re[i]["file_data"] = file.slice(start, end);
            re[i]["file_name"] = name;
            re[i]["file_size"] = size; //文件大小
        
        const URL = jQuery.upUrl;
        var i2 = 0, i3 = 1, fcs = Array();
        var xhr = new XMLHttpRequest();
        function ajaxStack(stack) 
            if (jQuery.upStatus() == false) 
                return;
            
            var form = new FormData();
            if (stack[i2]) 
                fcs = stack[i2];
                form.append("file_data", fcs['file_data']);
                form.append("file_name", fcs['file_name']);
                form.append("file_size", fcs['file_size']);
                form.append("file_md5", fileMD5);
                form.append("file_total", shardCount);
                form.append("file_index", i3);
                xhr.open('POST', URL, true);
                xhr.onload = function () 
                    ajaxStack(stack);
                
                xhr.onreadystatechange = function () 
                    if (jQuery.upStatus() == false) 
                        return;
                    
                    if (xhr.readyState == 4 && xhr.status == 200) 
                        var data = xhr.responseText ? eval('(' + xhr.responseText + ')') : '';
                        ++succeed;
                        var cent = jQuery.fcup_getPercent(succeed, shardCount);
                        if (typeof jQuery.upEvent == 'function') 
                            jQuery.upEvent(cent);
                        
                        if (cent == 100) 
                            setTimeout(function () 
                                if (typeof jQuery.upCallBack == 'function') 

                                    jQuery.upCallBack(data);
                                
                            , 500);
                         else 
                            if (typeof jQuery.upCallBack == 'function') 
                                jQuery.upCallBack(data);
                            
                        
                    
                
                xhr.send(form);
                i2++; i3++;
                form.delete('file_data');
                form.delete('file_name');
                form.delete('file_size');
                form.delete('file_md5');
                form.delete('file_total');
                form.delete('file_index');
            
        
        ajaxStack(re);
        re = null,
            file = null;
    ,

//这是核心代码
for (var i = 0; i < shardCount; ++i) 
            re[i] = [];
            start = i * shardSize,
                end = Math.min(size, start + shardSize);
            re[i]["file_data"] = file.slice(start, end);
            re[i]["file_name"] = name;
            re[i]["file_size"] = size; //文件大小
        

五、后端对分片的处理

• 因为每个分片的md5值是唯一的
• 所以可以通过md5值判断分片文件是否已经上传
• 如果已经上传可以直接跳过，否则进行分片的保存
• 通过索引和总数进行对比判断是否上传成功
• 上传成功的话，将分片进行合并成一个完整的文件
• 因为服务器内存的最大化，文件合并完毕就可以将分片删除清理

private function run($file)
    
        //上传分片到分片目录
        $shard_file = $file['file_md5'] . DIRECTORY_SEPARATOR . $file['file_index'];

        //跳过重复文件
        $result = file_exists($shard_file) ?: move_uploaded_file($file['file_data']['tmp_name'], $shard_file);

        if ($this->isFinish($file) && $result) 
            try 
                for ($i = 0; $i < $file['file_total']; $i++) 
                    $fileIndex = $i + 1;
                    $blob = file_get_contents($file['file_md5'] . DIRECTORY_SEPARATOR . $fileIndex);

                    file_put_contents($this->saveRoot . DIRECTORY_SEPARATOR . $file['file_name'], $blob, FILE_APPEND);

                    //删除分片文件
                    array_map('unlink', glob("$file['file_md5']/$fileIndex"));
                

                //删除分片文件夹
                @rmdir($file['file_md5']);

                $this->jsonBack([
                    'status' => static::UPLOAD_FINISH,
                    'msg' => '上传完成'
                ]);
             catch (Exception $e) 
                $this->jsonBack([
                    'status' => static::UPLOAD_ERROR,
                    'msg' => $e->getMessage()
                ]);
            
         else 
            if ($result) 
                $this->jsonBack([
                    'status' => static::UPLOAD_START,
                    'msg' => '正在上传：' . $file['file_index'] . '/' . $file['file_total']
                ]);
             else 
                $this->jsonBack([
                    'status' => static::UPLOAD_ERROR,
                    'msg' => '上传错误，请重新上传'
                ]);
            
        
    

六、断点续传 

• 其实在上面流程已经可以显示出来了
• 上传的时候有个索引值，告诉你，当前已经传到哪一个分片了
• 如果系统崩溃，导致上传断开，可以判断这个索引值，上传过的可以略过，进行后续的上传