php结合webuploader断点续传的实现

最新推荐文章于 2025-06-15 13:11:43 发布

原创

最新推荐文章于 2025-06-15 13:11:43 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#webuploader #断点续传

本文介绍了如何在PHP和WebUploader框架下实现断点续传功能。主要思路包括客户端和服务器端的处理，强调了分片上传的验证和合并过程，以及在服务端保存文件时需要注意的目录问题。同时，文中提到了分片验证的一个潜在bug，并给出了修复方案。

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

最近公司项目需要用到断点续传,所以记录一下其中的坑
使用到的主要技术

webuploader
thinkphp5

断点续传的思路:

客户端:

     1.获取文件md5(MD5是文件唯一标识,用来判断是否存在此文件,并且用作分片的文件夹名)

     2.将文件分片

     3.验证分片是否上传过,上传过直接跳过当前分片

     3.上传分片到md5的文件夹(保存文件名建议按分片序号来,因为分片的顺序很重要)

     4.最后一个分片上传完成后发送合并分片请求并由服务器返回文件信息

服务端

     1.获取md5文件夹下的文件数量并返回用作分片验证

     2.接收文件分片并保存到文件md5的文件夹,文件名称使用分片序号:如0.mp4,1.mp4

     3.合并分片时将md5文件夹下的所有文件按文件名顺序提取并写入到最终的文件内

     4.写入完成获取最终文件hash并判断是否存在,存在则返回已存在文件,删除当前文件,不存在则写入数据库并返回文件信息

大体思路是这样,实际还要加入许多验证,比客户端获取到md5后马上要验证文件是否存在,存在就不上传,直接使用文件信息,不存在则上传
分片上传前也要验证,不过分片的跳过规则需要注意,服务器只需要返回已有的分片数量,客户端根据已有的分片和当前分片索引即可判断是否应该跳过,因为分片是按顺序上传的,如:
在这里插入图片描述
,服务端需要注意合并的时候顺序不能乱,顺序乱了就无法还原源文件,所以建议用分片索引作为文件名,获取的时候直接按0,1,2这样获取就行了.

并且保存时要注意保存在自定义的目录下需要确保该目录存在,不存在的目录需要新建后才可以保存文件

完整代码如下:

客户端:

var uploader;
var fileMd5;
var is_upload;
var totalFiles;
function initWebUploader() {
   
   
    /***************************************************** 监听分块上传过程中的三个时间点 start ***********************************************************/
    WebUploader.Uploader.register({
   
   
        "before-send":"beforeSend",  //每个分片上传前
    },
    {
   
   
        //时间点2：如果有分块上传，则每个分块上传之前调用此函数
        beforeSend:function(block){
   
   
            var deferred = WebUploader.Deferred();
            if(is_upload)//跳过到开始上传的哪一个分片时
            {
   
   
                deferred.resolve();
            }else if(totalFiles)//已经获取过文件数量则直接判断是否跳过
            {
   
   
                //当前分片下标小于等于目录下的文件数量就认为分块存在,因为分块上传下标是由小到大
                if (block.chunk > totalFiles - 1) {
   
   
                    is_upload = true;
                    deferred.resolve();
                } else {
   
   
                    //分块存在，跳过
                    deferred.reject();
                }
            } else {
   
   
                $.post('/api.php/upload/checkUpload', {
   
   md5: fileMd5}, function (data) {
   
   
                    if (data.code) {
   
   
                        totalFiles = data.data;
                        //当前分片下标小于等于目录下的文件数量就认为分块存在,因为分块上传下标是由小到大
                        if (block.chunk > data.data - 1) {
   
   
                            is_upload = true;
                            deferred.resolve();
                        } else {
   
   
                            //分块存在，跳过
                            deferred.reject();
                        }
                    } else {
   
   
                        is_upload = true;
                        deferred.resolve();
                    }
                });
            }
            return deferred.promise();
        }
    });
    /***************************************************** 监听分块上传过程中的三个时间点 end **************************************************************/
    uploader = WebUploader.create({
   
   
        // swf文件路径
        swf:  '{$maccms.path}static/webupload/Uploader.swf',
        // 文件接收服务端。
        server: '/api.php/upload/chunkUpload',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#name',
        accept: {
   
   
            title: 'Images',
            extensions: 'mp4',
        },
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        prepareNextFile:true,
        chunked : true, // 分片处理
        chunkSize : 5 * 1024 * 1024, // 每片50M,经过测试，发现上传1G左右的视频大概每片50M速度比较快的，太大或者太小都对上传效率有影响
        chunkRetry : false,// 如果失败，则不重试
        threads:1,
        formData:{
   
   guid:WebUploader.Base.guid()}
    });
    uploader.on('fileQueued',function (file) {
   
   
        uploader.md5File( file,0,10*1024*1024 )
        // 及时显示进度
        .progress(function(percentage) {
   
   
            console.log('Percentage:', percentage);
            $(".readFile").text("正在读取视频信息..."+(percentage * 100).toFixed(2) + '%');
        })
        // 完成
        .then(functi