Layui 携手 PHP：大视频分片上传方案深度解析与实战避坑

随着短视频和在线教育的兴起，大视频文件的上传需求日益增长。直接上传动辄几个 G 的视频，不仅耗时漫长，还容易因网络波动导致上传失败。本文将深入探讨如何利用 Layui 前端框架和 PHP 后端技术，实现高效、稳定的大视频分片上传功能，并分享实际项目中的避坑经验。

问题场景重现：为何需要分片上传？

设想一个场景：用户要上传一个 5GB 的高清视频到你的网站。如果直接采用传统的表单提交方式，会面临以下问题：

• 上传时间过长：上传速度取决于用户的网络带宽，高峰时段可能需要几个小时。
• 容易中断：网络不稳定、浏览器崩溃等都可能导致上传中断，用户需要重新上传。
• 服务器压力大：单个大文件上传会占用服务器大量的带宽和资源，影响其他用户的访问。
• 用户体验差：长时间等待容易让用户失去耐心，降低用户满意度。

分片上传将大文件分割成多个小块，并行上传，有效解决了以上问题。

底层原理深度剖析：分片上传的核心机制

分片上传的核心思想是将大文件分割成多个小块（chunk），然后逐个上传到服务器。服务器接收到所有分片后，再将它们合并成完整的文件。这个过程涉及到以下关键步骤：

1. 前端分片：利用 JavaScript 将大文件分割成多个大小相等（或接近相等）的小块。例如，可以使用 File.slice() 方法进行切割。
2. 并发上传：前端并发地将这些分片上传到服务器，可以显著提高上传速度。
3. 后端接收与存储：PHP 后端接收到每个分片后，将其临时存储在服务器上，并记录分片的编号。
4. 分片校验：后端需要校验每个分片的完整性，确保没有丢失或损坏。
5. 合并分片：当所有分片都上传完成后，后端按照分片编号的顺序将它们合并成完整的文件。
6. 断点续传：如果上传过程中发生中断，前端可以记录已上传的分片编号，下次上传时只上传未完成的分片，实现断点续传。

为了保证高并发和高可用，可以考虑使用 Nginx 作为反向代理服务器，并配置负载均衡。Nginx 可以将请求分发到多台 PHP 服务器上，从而提高系统的整体性能和稳定性。此外，还可以使用宝塔面板等工具简化服务器的管理和配置。

具体的代码/配置解决方案：Layui + PHP 分片上传实战

以下是一个简单的 Layui 前端和 PHP 后端的分片上传实现示例：

前端（Layui + JavaScript）

<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="uploadBtn">选择视频文件</button>
  <div class="layui-progress" lay-showpercent="yes" id="progressBar" style="display: none;">
    <div class="layui-progress-bar" lay-percent="0%"></div>
  </div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
layui.use(['upload', 'element'], function(){
  var upload = layui.upload;
  var element = layui.element;

  var chunkSize = 1024 * 1024 * 2; // 2MB per chunk
  var file;
  var uploadedChunks = [];

  //执行实例
  upload.render({
    elem: '#uploadBtn'
    ,accept: 'video'
    ,auto: false // 禁止自动上传
    ,choose: function(obj){
      obj.preview(function(index, _file, result){
        file = _file;
        $('#progressBar').show();
        sliceAndUpload();
      });
    }
  });

  function sliceAndUpload() {
    var fileSize = file.size;
    var chunkCount = Math.ceil(fileSize / chunkSize);

    for (let i = 0; i < chunkCount; i++) {
      if (uploadedChunks.indexOf(i) !== -1) {
        continue; // Skip already uploaded chunks
      }
      var start = i * chunkSize;
      var end = Math.min(fileSize, start + chunkSize);
      var chunk = file.slice(start, end);

      uploadChunk(chunk, i, chunkCount);
    }
  }

  function uploadChunk(chunk, chunkIndex, chunkCount) {
    var formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('chunkIndex', chunkIndex);
    formData.append('chunkCount', chunkCount);
    formData.append('filename', file.name);

    $.ajax({
      url: '/upload.php'
      ,type: 'POST'
      ,data: formData
      ,contentType: false
      ,processData: false
      ,success: function(res){
        uploadedChunks.push(chunkIndex);
        var percent = Math.round((uploadedChunks.length / chunkCount) * 100) + '%';
        element.progress('demo', percent);

        if (uploadedChunks.length === chunkCount) {
          // All chunks uploaded, notify the server to merge
          mergeChunks(file.name);
        }
      },
      error: function(err){
        console.error('Chunk upload failed:', err);
      }
    });
  }

  function mergeChunks(filename) {
    $.ajax({
      url: '/merge.php',
      type: 'POST',
      data: { filename: filename },
      success: function(res) {
        console.log('File merged successfully:', res);
        layer.msg('上传成功');
      },
      error: function(err) {
        console.error('Merge failed:', err);
      }
    });
  }
});
</script>

后端（PHP）

<?php
// upload.php
$target_dir = "uploads/";
$filename = $_POST["filename"];
$chunkIndex = $_POST["chunkIndex"];
$chunk = $_FILES["chunk"]["tmp_name"];

$target_file = $target_dir . basename($filename) . ".part" . $chunkIndex;

if (move_uploaded_file($chunk, $target_file)) {
  echo "Chunk uploaded successfully";
} else {
  echo "Chunk upload failed";
}
?>

<?php
// merge.php
$target_dir = "uploads/";
$filename = $_POST["filename"];
$chunkCount = $_POST["chunkCount"]; //Not used here, should be fetched dynamically or stored on server side

$final_file = $target_dir . basename($filename);

$output = fopen($final_file, 'wb');

for ($i = 0; ; $i++) {
    $part_file = $target_dir . basename($filename) . ".part" . $i;

    if (!file_exists($part_file)) {
        break;
    }

    $input = fopen($part_file, 'rb');
    stream_copy_to_stream($input, $output);
    fclose($input);
    unlink($part_file); //Remove part file after merge
}

fclose($output);

echo "File merged successfully";
?>

注意： 上述代码只是一个简单的示例，实际项目中需要进行更完善的错误处理、安全验证和性能优化。

Nginx 配置 (可选，用于高并发场景)

http {
    upstream php_servers {
        server 127.0.0.1:9000 weight=5;  # PHP-FPM 服务器 1
        server 127.0.0.1:9001 weight=5;  # PHP-FPM 服务器 2
    }

    server {
        listen 80;
        server_name yourdomain.com;
        root /var/www/your_project;
        index index.php index.html index.htm;

        location / {
            try_files $uri $uri/ /index.php?$query_string;
        }

        location ~ \.php$ {
            fastcgi_pass php_servers; # 使用 upstream
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
            client_max_body_size 5000m; # 允许上传的最大文件大小 (例如 5GB)
        }
    }
}

实战避坑经验总结

• 分片大小的选择：分片大小会影响上传速度和服务器压力。太小会导致频繁的网络请求，太大则可能因网络波动导致上传失败。通常建议选择 1MB-10MB 之间的大小，具体数值可以根据实际情况进行调整。
• 断点续传的实现：为了实现断点续传，需要在前端记录已上传的分片编号，并在后端判断哪些分片已经存在，避免重复上传。
• 安全性问题：需要对上传的文件进行安全验证，防止恶意代码的上传和执行。可以对文件名、文件类型和文件内容进行检查。
• 并发连接数限制：如果服务器的并发连接数有限制，需要控制前端的并发上传数量，避免服务器过载。
• 磁盘空间管理：需要定期清理临时分片文件，避免占用过多的磁盘空间。
• 合并策略：合并分片时，务必按照分片编号的顺序进行，否则会导致文件损坏。

通过 Layui 前端和 PHP 后端的配合，可以实现稳定、高效的大视频分片上传功能。在实际项目中，还需要根据具体的需求和场景进行优化和改进，以达到最佳的用户体验。