news 2026/4/16 20:04:40

PHP央企视频大文件上传进度条怎么实现?

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
PHP央企视频大文件上传进度条怎么实现?

2023年XX月XX日 开发日志 - 大文件传输系统攻坚实录
(关键词:20GB文件传输/文件夹层级保持/全浏览器兼容/断点续传)


晨间需求分析

客户需求本质是**“非结构化数据的可靠传输”**,技术难点集中在:

  1. 文件夹结构序列化(需处理Windows/macOS/Linux路径差异)
  2. 断点续传的持久化(需考虑浏览器崩溃、系统重启等异常场景)
  3. IE8兼容性(需降级方案应对不支持File API的浏览器)

注:预算100元实难覆盖开发成本,但可作为技术验证原型。


技术方案选型

前端方案

WebUploader+H5混合模式

IE8降级方案:Flash+ActiveX

后端架构

分片上传签名生成

OSS直传+服务端回调校验


核心代码片段

1. 前端文件夹结构采集 (Vue3+WebUploader)
// 文件夹上传元数据生成consttraverseFolder=async(dirHandle)=>{letfileTree={name:dirHandle.name,children:[]};forawait(constentryofdirHandle.values()){if(entry.kind==='file'){fileTree.children.push({name:entry.name,size:(awaitentry.getFile()).size,webkitRelativePath:entry.webkitRelativePath});}else{fileTree.children.push(awaittraverseFolder(entry));}}returnfileTree;}

关键点:使用File System Access API获取完整路径信息

2. 断点续传服务端记录 (PHP+MySQL)
// 分片状态记录表结构CREATETABLE`upload_chunks`(`upload_id`VARCHAR(64)PRIMARYKEY,`user_id`INTNOTNULL,`file_path`TEXTCOMMENT'OSS存储路径',`chunk_map`LONGTEXTCOMMENT'JSON格式分片完成状态',`folder_structure`LONGTEXTCOMMENT'原始文件夹结构')ENGINE=InnoDBDEFAULTCHARSET=utf8mb4;// 断点查询接口functiongetUploadProgress($uploadId){$stmt=$pdo->prepare("SELECT chunk_map FROM upload_chunks WHERE upload_id=?");$stmt->execute([$uploadId]);returnjson_decode($stmt->fetchColumn(),true);}
3. OSS分片上传签名 (PHP SDK)
useOSS\OssClient;functiongenerateChunkSign($objectPath,$chunkIndex){$client=newOssClient(ACCESS_KEY,SECRET_KEY,ENDPOINT);$options=[OssClient::OSS_PART_NUM=>$chunkIndex,OssClient::OSS_CONTENT_TYPE=>'application/octet-stream'];return$client->generatePresignedUrl(BUCKET,$objectPath,TIMEOUT,'PUT',$options);}

浏览器兼容方案对比表

特性现代浏览器方案IE8降级方案
文件夹选择``Flash+DirectoryReader
分片上传File APIFlash FileReference
进度事件ProgressEventExternalInterface回调

踩坑预警

  1. 路径标准化问题
    // 统一转换路径分隔符functionnormalizePath(path){returnpath.replace(/\\/g,'/').replace(/\/+/g,'/');}
  2. OSS分片限制
    • 单文件最大5TB但分片数不得超过10000
    • 20GB文件建议设置分片大小为20MB(需计算:Math.ceil(20*1024/20)=1024片)

后续计划

  1. 编写WebWorker后台计算MD5(防止UI阻塞)
  2. 实现文件夹下载的ZIP流式打包(避免服务端临时文件)
  3. 压力测试方案设计(模拟1000并发文件夹上传)

注:完整实现需约120小时开发量,建议客户调整预算或简化需求。可提供基础框架供二次开发。

今日总结:技术方案已明确,但需与客户沟通现实可行性。明日将重点突破IE8兼容层实现。


开发者备注:如需进一步讨论实现细节,可参考WebUploader改造指南或联系群内@架构师老王。

安装环境

PHP:7.2.14

调整块大小

NOSQL

NOSQL不需要任何配置,可以直接访问测试

SQL

创建数据库

您可以直接复制脚本进行创建

配置数据库连接

安装依赖

访问页面进行测试

数据表中的数据

效果预览

文件上传

文件刷新续传

支持离线保存文件进度,在关闭浏览器,刷新浏览器后进行不丢失,仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构,同样支持进度信息离线保存,刷新页面,关闭页面,重启系统不丢失上传进度。

免费下载示例

点击下载完整示例

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/16 11:02:04

ms-swift界面训练:Gradio操作太友好了吧!

ms-swift界面训练:Gradio操作太友好了吧! 1. 为什么说Gradio界面让大模型训练变得“手把手可操作” 你有没有试过用命令行跑一个大模型微调任务?复制粘贴一长串参数,改错一个--就报错,显存不够还得反复调batch size&…

作者头像 李华
网站建设 2026/4/15 22:00:11

Qwen3-TTS实测:10种语言语音合成效果对比

Qwen3-TTS实测:10种语言语音合成效果对比 1. 开场:不是“能说”,而是“说得像人” 你有没有试过让AI读一段文字,结果听着像机器人在念密码?语调平得像尺子量过,停顿生硬得像卡顿的视频,情感&a…

作者头像 李华
网站建设 2026/4/15 13:59:37

新手必看:TranslateGemma常见错误排查与解决方法

新手必看:TranslateGemma常见错误排查与解决方法 你刚部署好 TranslateGemma : Matrix Engine,满怀期待地打开浏览器,输入一段英文准备翻译——结果页面卡住、控制台报错、甚至终端直接崩出一长串红色文字?别急,这不是…

作者头像 李华
网站建设 2026/4/16 20:02:44

解放双手!用Ollama运行Yi-Coder-1.5B自动补全代码

解放双手!用Ollama运行Yi-Coder-1.5B自动补全代码 1. 为什么你需要一个轻量级的代码助手? 你有没有过这样的经历:写到一半的Python脚本卡在某个函数调用上,翻文档、查Stack Overflow、反复试错,十分钟过去只写了三行…

作者头像 李华
网站建设 2026/4/16 10:59:45

c盘变红了如何清理?6种正确清理C盘的实用方法【干货】

在使用Windows操作系统的过程中,很多用户都可能遇到过C盘空间不足,甚至满到变红色的尴尬情况。C盘作为系统盘,其空间的大小和剩余情况直接关系到系统的运行稳定性和效率。一旦C盘空间告急,不仅可能导致系统运行缓慢,还…

作者头像 李华
网站建设 2026/4/16 12:32:02

常用正则表达式大全:轻松验证邮箱、提取链接

正则表达式是处理文本的利器,掌握一些常用模式能极大提升工作效率。我日常与代码和数据打交道,积累了一些经过实践检验的表达式,它们能应对大多数常见的匹配、提取和验证场景。 如何用正则表达式验证邮箱格式 邮箱验证是常见需求&#xff0…

作者头像 李华