WebUploader与PHP实现视频分片上传技术详解

1. WebUploader与PHP实现视频分片上传的核心原理

在处理大文件上传时，传统的表单上传方式会遇到各种限制和问题。WebUploader结合PHP的分片上传方案能够有效解决这些痛点，其核心原理可以概括为以下几个关键点：

1.1 分片上传的基本工作流程

分片上传的核心思想是将大文件切割成多个小块（chunk），然后逐个上传这些小块，最后在服务器端将这些小块重新组合成完整的文件。具体流程如下：

1. 前端分片处理：

   • 使用JavaScript的File API读取文件
   • 通过slice方法将文件切割为固定大小的块（如5MB/块）
   • 为每个分片生成唯一标识（通常使用文件MD5+分片索引）

2. 分片上传过程：

   • 使用FormData封装分片数据
   • 通过AJAX逐个上传分片到服务器
   • 上传时携带分片索引、总分片数等元信息

3. 服务器端处理：

   • 接收分片并存储在临时目录
   • 记录已接收的分片信息
   • 检查分片完整性（大小校验、MD5校验）

4. 分片合并：

   • 当所有分片上传完成后触发合并请求
   • 服务器按索引顺序读取所有分片并写入最终文件
   • 清理临时分片文件

1.2 为什么需要分片上传

分片上传相比传统上传方式具有以下显著优势：

• 突破大小限制：绕过PHP的post_max_size和upload_max_filesize限制
• 网络容错性：单个分片失败只需重传该分片，而非整个文件
• 断点续传：通过记录已上传分片实现上传进度恢复
• 并行上传：可以同时上传多个分片提高整体速度
• 进度显示：可以精确计算和显示上传进度

1.3 WebUploader的核心优势

WebUploader作为专业的上传组件，在分片上传方面提供了完善的支持：

1. 自动分片：内置分片逻辑，开发者只需配置分片大小
2. 并发控制：可配置同时上传的分片数量
3. 进度反馈：提供精细的上传进度事件
4. 文件校验：支持MD5校验确保文件完整性
5. UI组件：内置美观的上传界面和状态展示

2. 前端实现：WebUploader的配置与使用

2.1 基础环境准备

首先需要在项目中引入WebUploader：

html复制<!-- 引入WebUploader CSS -->
<link rel="stylesheet" type="text/css" href="webuploader.css">

<!-- 引入WebUploader JS -->
<script src="webuploader.min.js"></script>

<!-- 上传容器 -->
<div id="uploader-container">
    <div id="filePicker">选择文件</div>
    <div id="fileList"></div>
    <button id="uploadBtn">开始上传</button>
</div>

2.2 WebUploader初始化配置

以下是针对视频分片上传的推荐配置：

javascript复制var uploader = WebUploader.create({
    // 基本配置
    swf: 'Uploader.swf',      // Flash文件路径，用于兼容老浏览器
    server: 'upload.php',     // 服务器端接收URL
    pick: '#filePicker',      // 选择文件的按钮
    fileVal: 'file',          // 文件字段名
    
    // 分片配置
    chunked: true,            // 开启分片上传
    chunkSize: 5 * 1024 * 1024, // 分片大小5MB
    chunkRetry: 2,            // 失败重试次数
    threads: 3,               // 并发上传线程数
    
    // 文件限制
    accept: {
        title: '视频文件',
        extensions: 'mp4,avi,mov,wmv,flv',
        mimeTypes: 'video/*'
    },
    fileSingleSizeLimit: 2 * 1024 * 1024 * 1024 // 2GB
});

2.3 关键事件处理

WebUploader提供了丰富的事件用于控制上传流程：

javascript复制// 文件加入队列
uploader.on('fileQueued', function(file) {
    // 添加到文件列表显示
    $('#fileList').append(
        `<div id="${file.id}" class="file-item">
            <span>${file.name}</span>
            <span class="progress">等待上传</span>
        </div>`
    );
    
    // 计算文件MD5（用于断点续传）
    uploader.md5File(file).then(function(md5) {
        file.md5 = md5;
    });
});

// 分片上传前
uploader.on('uploadBeforeSend', function(obj, data, headers) {
    // 添加分片信息到FormData
    data.md5 = obj.file.md5;
    data.chunk = obj.chunk;
    data.chunks = obj.chunks;
});

// 上传进度
uploader.on('uploadProgress', function(file, percentage) {
    var $item = $('#' + file.id);
    $item.find('.progress').text('上传中: ' + Math.round(percentage * 100) + '%');
});

// 上传成功
uploader.on('uploadSuccess', function(file) {
    $('#' + file.id).find('.progress').text('上传完成');
});

// 上传完成（所有分片上传完毕）
uploader.on('uploadComplete', function(file) {
    // 通知服务器合并文件
    $.post('merge.php', {
        name: file.name,
        md5: file.md5,
        chunks: file.chunks,
        size: file.size
    }, function(response) {
        if(response.success) {
            $('#' + file.id).find('.progress').text('合并完成');
        }
    });
});

2.4 断点续传实现

断点续传的关键是记录已上传的分片信息：

javascript复制// 检查已上传分片
function checkChunks(md5, chunks) {
    return $.ajax({
        url: 'check.php',
        type: 'POST',
        data: {md5: md5},
        dataType: 'json'
    }).then(function(res) {
        return res.uploaded || [];
    });
}

// 在文件加入队列后
uploader.on('fileQueued', function(file) {
    // ...之前代码...
    
    // 检查已上传分片
    checkChunks(file.md5, file.chunks).then(function(uploaded) {
        file.uploaded = uploaded;
        
        // 跳过已上传分片
        uploader.skipFile(file, uploaded);
    });
});

3. PHP服务器端处理

3.1 接收分片文件

创建upload.php处理分片上传：

php复制<?php
header('Content-Type: application/json');

// 获取参数
$chunk = isset($_REQUEST['chunk']) ? intval($_REQUEST['chunk']) : 0;
$chunks = isset($_REQUEST['chunks']) ? intval($_REQUEST['chunks']) : 1;
$md5 = isset($_REQUEST['md5']) ? $_REQUEST['md5'] : '';
$fileName = isset($_FILES['file']['name']) ? $_FILES['file']['name'] : '';

// 创建临时目录
$tempDir = 'uploads/temp/' . $md5;
if (!file_exists($tempDir)) {
    mkdir($tempDir, 0777, true);
}

// 移动分片文件
$chunkPath = $tempDir . '/' . $chunk;
if (move_uploaded_file($_FILES['file']['tmp_name'], $chunkPath)) {
    // 记录已上传分片
    file_put_contents($tempDir . '/.progress', $chunk . "\n", FILE_APPEND);
    
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false, 'error' => '移动文件失败']);
}

3.2 检查分片状态

创建check.php用于检查上传进度：

php复制<?php
header('Content-Type: application/json');

$md5 = isset($_POST['md5']) ? $_POST['md5'] : '';
$tempDir = 'uploads/temp/' . $md5;

$uploaded = [];
if (file_exists($tempDir . '/.progress')) {
    $uploaded = file($tempDir . '/.progress', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
    $uploaded = array_map('intval', $uploaded);
}

echo json_encode(['uploaded' => $uploaded]);

3.3 合并分片文件

创建merge.php处理分片合并：

php复制<?php
header('Content-Type: application/json');

$fileName = isset($_POST['name']) ? $_POST['name'] : '';
$md5 = isset($_POST['md5']) ? $_POST['md5'] : '';
$chunks = isset($_POST['chunks']) ? intval($_POST['chunks']) : 0;
$fileSize = isset($_POST['size']) ? intval($_POST['size']) : 0;

$tempDir = 'uploads/temp/' . $md5;
$finalPath = 'uploads/' . date('Ymd') . '/' . $fileName;

// 检查是否所有分片都已上传
$uploadedChunks = glob($tempDir . '/*[0-9]');
if (count($uploadedChunks) != $chunks) {
    echo json_encode(['success' => false, 'error' => '分片不完整']);
    exit;
}

// 创建最终目录
if (!file_exists(dirname($finalPath))) {
    mkdir(dirname($finalPath), 0777, true);
}

// 合并文件
$finalFile = fopen($finalPath, 'wb');
for ($i = 0; $i < $chunks; $i++) {
    $chunkPath = $tempDir . '/' . $i;
    $chunkContent = file_get_contents($chunkPath);
    fwrite($finalFile, $chunkContent);
    unlink($chunkPath); // 删除分片
}
fclose($finalFile);

// 验证文件大小
if (filesize($finalPath) != $fileSize) {
    unlink($finalPath);
    echo json_encode(['success' => false, 'error' => '文件大小不匹配']);
    exit;
}

// 清理临时文件
array_map('unlink', glob($tempDir . '/.*'));
rmdir($tempDir);

echo json_encode(['success' => true, 'path' => $finalPath]);

4. 高级功能与优化

4.1 视频预览与封面生成

在上传视频时，可以提取第一帧作为封面：

javascript复制// 在文件加入队列后生成预览
uploader.on('fileQueued', function(file) {
    // ...之前代码...
    
    // 视频预览
    if (file.type.indexOf('video') === 0) {
        var video = document.createElement('video');
        video.preload = 'metadata';
        
        video.onloadedmetadata = function() {
            window.URL.revokeObjectURL(video.src);
            
            // 设置视频时长
            $('#' + file.id).append('<span class="duration">' + 
                formatDuration(video.duration) + '</span>');
            
            // 生成封面
            generateThumbnail(file, video);
        };
        
        video.src = URL.createObjectURL(file.getSource());
    }
});

function generateThumbnail(file, video) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 160;
    canvas.height = 90;
    
    // 截取第一帧
    video.currentTime = 0;
    video.addEventListener('seeked', function() {
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        
        // 显示缩略图
        var thumbnail = canvas.toDataURL('image/jpeg');
        $('#' + file.id).prepend(
            '<img class="thumb" src="' + thumbnail + '">'
        );
    });
}

4.2 上传速度限制

WebUploader支持动态调整上传速度：

javascript复制// 限制上传速度为1MB/s
uploader.uploadSpeed = 1024 * 1024;

// 动态调整速度
$('#speedControl').on('change', function() {
    uploader.uploadSpeed = $(this).val() * 1024 * 1024;
});

4.3 分片验证与重试

增强分片上传的可靠性：

javascript复制// 分片上传前验证
uploader.on('uploadBeforeSend', function(obj, data, headers) {
    // 添加验证头
    headers['X-Chunk-MD5'] = calculateChunkMD5(obj.blob);
});

// 计算分片MD5
function calculateChunkMD5(blob) {
    return new Promise(function(resolve) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var md5 = SparkMD5.ArrayBuffer.hash(e.target.result);
            resolve(md5);
        };
        reader.readAsArrayBuffer(blob);
    });
}

// PHP端验证分片
$chunkMD5 = $_SERVER['HTTP_X_CHUNK_MD5'] ?? '';
$localMD5 = md5_file($_FILES['file']['tmp_name']);

if ($chunkMD5 && $chunkMD5 !== $localMD5) {
    http_response_code(400);
    echo json_encode(['success' => false, 'error' => '分片校验失败']);
    exit;
}

4.4 并发上传优化

根据网络状况动态调整并发数：

javascript复制// 根据网络延迟动态调整并发数
var lastSpeed = 0;
var adjustInterval = setInterval(function() {
    var currentSpeed = uploader.getStats().speed;
    
    if (currentSpeed > lastSpeed * 1.2) {
        // 速度提升，尝试增加并发
        uploader.options.threads = Math.min(
            uploader.options.threads + 1, 
            5 // 最大并发数
        );
    } else if (currentSpeed < lastSpeed * 0.8) {
        // 速度下降，减少并发
        uploader.options.threads = Math.max(
            uploader.options.threads - 1,
            1 // 最小并发数
        );
    }
    
    lastSpeed = currentSpeed;
}, 5000); // 每5秒调整一次

// 上传完成后停止调整
uploader.on('uploadFinished', function() {
    clearInterval(adjustInterval);
});

5. 安全与性能优化

5.1 安全防护措施

1. 文件类型验证：

php复制// 在upload.php中添加
$allowedTypes = ['video/mp4', 'video/avi', 'video/quicktime', 'video/x-ms-wmv'];
if (!in_array($_FILES['file']['type'], $allowedTypes)) {
    echo json_encode(['success' => false, 'error' => '不支持的文件类型']);
    exit;
}

2. 文件内容验证：

php复制// 使用getimagesize验证视频文件
$info = getimagesize($_FILES['file']['tmp_name']);
if ($info === false || strpos($info['mime'], 'video/') !== 0) {
    echo json_encode(['success' => false, 'error' => '无效的视频文件']);
    exit;
}

3. 文件重命名：

php复制// 在merge.php中
$extension = pathinfo($fileName, PATHINFO_EXTENSION);
$newName = md5(uniqid() . $fileName) . '.' . $extension;
$finalPath = 'uploads/' . date('Ymd') . '/' . $newName;

5.2 性能优化建议

1. 内存优化：

php复制// 在merge.php中使用流式合并
$finalFile = fopen($finalPath, 'wb');
for ($i = 0; $i < $chunks; $i++) {
    $chunkPath = $tempDir . '/' . $i;
    $chunkFile = fopen($chunkPath, 'rb');
    while (!feof($chunkFile)) {
        fwrite($finalFile, fread($chunkFile, 8192));
    }
    fclose($chunkFile);
    unlink($chunkPath);
}
fclose($finalFile);

2. 分片大小调整：

javascript复制// 根据文件大小动态调整分片大小
function calculateChunkSize(fileSize) {
    if (fileSize > 1024 * 1024 * 1024) { // >1GB
        return 10 * 1024 * 1024; // 10MB
    } else if (fileSize > 100 * 1024 * 1024) { // >100MB
        return 5 * 1024 * 1024; // 5MB
    } else {
        return 1 * 1024 * 1024; // 1MB
    }
}

uploader.on('fileQueued', function(file) {
    uploader.options.chunkSize = calculateChunkSize(file.size);
});

3. 服务器负载控制：

php复制// 在upload.php中添加负载检查
$load = sys_getloadavg();
if ($load[0] > 5) { // 1分钟负载超过5
    http_response_code(503);
    echo json_encode(['success' => false, 'error' => '服务器繁忙，请稍后重试']);
    exit;
}

6. 常见问题与解决方案

6.1 分片上传失败问题排查

1. 分片顺序错乱：

   • 现象：合并后的文件损坏
   • 解决方案：在服务器端按数字顺序重命名分片后再合并

2. 分片丢失：

   • 现象：合并时提示缺少分片
   • 解决方案：实现分片完整性校验，记录每个分片的MD5

3. 网络中断：

   • 现象：上传过程中断
   • 解决方案：实现断点续传功能，记录已上传分片

6.2 PHP配置问题

1. 上传大小限制：

   • 修改php.ini中的以下参数：

     code复制upload_max_filesize = 1024M
     post_max_size = 1024M
     max_execution_time = 300
     

2. 临时目录权限：

   • 确保PHP有权限读写临时目录
   • 设置正确的目录权限：

     bash复制chmod -R 777 uploads/
     

3. 内存不足：

   • 增加PHP内存限制：

     code复制memory_limit = 256M
     

6.3 浏览器兼容性问题

1. IE浏览器支持：

   • 需要引入Flash组件实现分片上传
   • 添加兼容性检测：

     javascript复制if (!WebUploader.Uploader.support()) {
         alert('您的浏览器不支持分片上传，请使用现代浏览器');
     }
     

2. Safari浏览器问题：

   • Safari对Blob.slice的实现与其他浏览器不同
   • 解决方案：使用WebUploader内置的兼容处理

3. 移动端适配：

   • 触摸事件支持：

     javascript复制uploader.on('touchstart', function() {
         // 处理触摸事件
     });
     

   • 分片大小调整：移动网络下使用更小的分片

7. 实际项目中的经验分享

在实际项目中实现视频分片上传时，我总结了以下几点经验：

1. 分片大小选择：

   • 局域网环境：5-10MB/片
   • 移动网络：1-2MB/片
   • 不稳定网络：0.5-1MB/片

2. 并发控制策略：

   • 初始并发数设置为3
   • 根据网络状况动态调整
   • 遇到错误时自动降低并发

3. 断点续传实现：

   • 使用文件MD5作为唯一标识
   • 服务器端记录已上传分片
   • 客户端恢复时跳过已上传分片

4. 上传进度显示：

   • 显示整体进度和当前分片进度
   • 预估剩余时间
   • 显示上传速度

5. 错误处理与重试：

   • 分片上传失败自动重试
   • 超过重试次数后暂停上传
   • 提供手动重试按钮

6. 服务器端优化：

   • 使用异步方式处理分片合并
   • 定期清理未完成的临时分片
   • 实现分布式存储支持

7. 安全防护：

   • 验证文件类型和内容
   • 限制上传频率
   • 实现病毒扫描接口

8. 日志记录：

   • 记录上传过程中的关键事件
   • 保存错误日志便于排查
   • 实现上传统计和分析

在实现过程中，最大的挑战是处理各种边界情况和异常场景。例如网络中断后恢复上传、服务器重启后继续未完成的上传、不同浏览器的兼容性问题等。通过多次迭代和测试，最终形成了一个稳定可靠的分片上传方案。