thinkphp 上传视频进度条

基础概念

ThinkPHP 是一个流行的 PHP 开发框架，它提供了丰富的功能和组件来简化 Web 应用的开发。上传视频进度条是一个用户界面元素，用于显示视频文件上传的进度，提升用户体验。

类型

前端进度条：通过 JavaScript 和 HTML 实现，显示在前端页面上。
后端进度条：通过服务器端的日志或数据库记录上传进度，再反馈到前端。

应用场景

视频分享平台：用户上传视频时，显示上传进度。
在线教育平台：教师上传教学视频时，显示上传进度。
企业内部系统：员工上传重要文件时，显示上传进度。

实现方法

前端实现

使用 HTML 和 JavaScript 可以实现一个简单的上传进度条。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload Progress Bar</title>
    <style>
        #progress {
            width: 100%;
            background-color: #ddd;
        }
        #bar {
            width: 0%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <form action="upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="video">
        <input type="submit" value="Upload">
    </form>
    <div id="progress">
        <div id="bar">0%</div>
    </div>

    <script>
        document.querySelector('form').addEventListener('submit', function(event) {
            event.preventDefault();
            var formData = new FormData(this);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'upload.php', true);

            xhr.upload.onprogress = function(event) {
                if (event.lengthComputable) {
                    var percentComplete = (event.loaded / event.total) * 100;
                    document.getElementById('bar').style.width = percentComplete + '%';
                    document.getElementById('bar').innerHTML = percentComplete.toFixed(2) + '%';
                }
            };

            xhr.send(formData);
        });
    </script>
</body>
</html>

后端实现

在后端，可以使用 ThinkPHP 的文件上传功能，并记录上传进度。以下是一个简单的示例：

<?php
namespace app\index\controller;

use think\Controller;
use think\Request;

class Upload extends Controller
{
    public function index(Request $request)
    {
        if ($request->isPost()) {
            $file = $request->file('video');
            if ($file) {
                $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
                if ($info) {
                    return json(['code' => 1, 'msg' => 'Upload success', 'data' => $info->getSaveName()]);
                } else {
                    return json(['code' => 0, 'msg' => $file->getError()]);
                }
            }
        }
    }
}

常见问题及解决方法

进度条不更新：可能是 JavaScript 事件监听器没有正确绑定，或者服务器端没有正确返回进度信息。
- 解决方法：检查 JavaScript 代码，确保事件监听器正确绑定，并且服务器端返回的进度信息格式正确。

上传速度慢：可能是网络问题或者服务器配置不当。
- 解决方法：检查网络连接，优化服务器配置，增加带宽。
文件上传失败：可能是文件大小限制、文件类型限制或者服务器存储空间不足。
- 解决方法：检查 ThinkPHP 的配置文件，调整文件大小和类型限制，确保服务器有足够的存储空间。