如何在Laravel网站实现视频上传、存储及列表展示？解决上传慢页面过期问题

一、现有代码问题排查 #

• 验证完成后执行了dd($request->all())，该函数会直接终止程序运行，后续所有上传逻辑都不会执行，直接删除该行即可。
• 验证规则要求filename参数必传，但后续存储时取的是$request->file_name，参数名不一致会导致字段赋值失败。
• 服务端默认配置限制了上传文件大小和脚本执行时长，大视频上传时会触发超时或大小限制，导致页面过期、上传失败。
• 现有代码仅支持单文件上传，没有适配多视频上传的处理逻辑。

二、基础功能修复 #

2.1 调整服务端配置 #

首先修改php.ini配置文件，调整以下参数：

• upload_max_filesize = 2048M：按需设置单视频最大大小，示例为2G
• post_max_size = 2048M：POST请求总大小，需要大于单文件上限
• max_execution_time = 3600：脚本最大执行时间，单位为秒
• max_input_time = 3600：接收请求数据的最大时长

如果使用Nginx作为Web服务，还需要在Nginx配置中添加client_max_body_size 2048M;，避免反向代理层拦截大文件请求。

2.2 改造上传代码支持多视频上传 #

前端表单需要添加enctype="multipart/form-data"属性，上传控件添加multiple属性支持多选视频，后端代码改造如下：

// 验证规则调整，file改为数组格式
$this->validate($request, [
    'file_name' => 'required',
    'file.*' => 'mimes:mp4,ts|max:100040|required'
]);

if ($request->hasFile('file')) {
    // 循环处理多个上传文件
    foreach ($request->file('file') as $file) {
        if($file->isValid())
        {
            $video_file = new VideoPost();                        
            $fileExtension = $file->extension();
            $fileName = $file->getClientOriginalName();
            $fileFullName = time()."_".$fileName;
            $path = Str::slug($fileFullName).".".$fileExtension;
            $file->move(public_path('files/'), $path);
            $fullpath = 'files/'.$path;
            $video_file->file = $fullpath;
            $video_file->file_name = $request->file_name;
            $video_file->save();
        }
    }
    // 上传完成后跳转或返回成功提示
    return back()->with('success', '视频上传成功');
}

三、视频列表展示实现 #

后端控制器查询视频数据，分页后传给视图：

public function list()
{
    $videos = VideoPost::orderBy('id', 'desc')->paginate(10);
    return view('video.list', compact('videos'));
}

前端视图循环渲染视频列表：

<div class="video-list">
    @foreach($videos as $video)
    <div class="video-item">
        <h3>{{ $video->file_name }}</h3>
        <video src="{{ asset($video->file) }}" controls width="600"></video>
    </div>
    @endforeach
    <!-- 分页链接 -->
    {{ $videos->links() }}
</div>

四、上传体验优化方案 #

• 改用分块上传：将大视频切分为小分片逐个上传，支持断点续传，完全避免大文件单次上传超时的问题。
• 前端添加上传进度条：给用户明确的上传进度反馈，避免用户误以为页面卡顿刷新导致上传中断。
• 改为异步AJAX上传：上传过程中页面不跳转，不会出现页面过期的提示，交互体验更好。

内容的提问来源于stack exchange，提问作者Muhammad AbuBaker