随着数字心理辅导系统的迭代,数据采集形式已不再局限于传统的文字量表。部分系统集成了电子心理沙盘,并支持将学生的操作过程及辅导画面录制为高清视频进行归档。
一段时长 45 分钟的 1080P 沙盘视频文件,其体积往往在 1GB 到 2GB 之间。在校园网络的实际办公环境中,如果前端仅依靠基础的 <input type="file"> 配合常规的 HTTP POST 请求上传如此巨大的文件,极易受到带宽波动的影响。一旦网络发生瞬间断连,请求就会超时中断。由于基础的 POST 上传不支持进度保留,用户只能从 0% 重新开始,这严重影响了业务操作的连贯性。
为了提升大体积文件传输的可靠性,前端与后端需要结合使用分片上传(Chunked Upload)与断点续传机制,重新构建一套稳定的上传架构。
前端处理:大文件的数据分片
处理超大文件上传的基础思路是“化整为零”。在客户端,我们可以利用 HTML5 中 File 对象(继承自 Blob)的 slice 方法,对本地的大体积文件进行切割。
假设我们将每个文件块(Chunk)的大小设定为 5MB:
“`javascript
const CHUNK_SIZE = 5 1024 1024; // 设定分片大小为 5MB
const chunks = [];
let current = 0;
// 将超大文件循环切割为多个固定大小的切片
while (current < hugeFile.size) {
chunks.push(hugeFile.slice(current, current + CHUNK_SIZE));
current += CHUNK_SIZE;
}
“`
通过这种方式,原本庞大的单一请求被拆解为数百个体积较小的独立文件块。前端继而通过多个 HTTP 请求将这些分片发送给后端,并可以利用浏览器的并发请求机制(通常限制并发数为 3 至 6 个),实现多路上传,从而更充分地利用当前的可用上行带宽。
指纹校验与断点续传逻辑
由于大量分片是并发或乱序抵达服务端的,后端需要明确的标识来重组它们。在开始上传前,前端通常会采用增量哈希算法(如 SparkMD5)读取文件内容,计算出一个全局唯一的文件 MD5 哈希值,作为该文件的“指纹”。
在发送每个 5MB 块时,前端会在请求负载中附带该文件的 MD5 值以及当前分片的序号。后端接收到分片后将其暂存至临时目录中。当确认所有序号的分片均已接收完毕后,后端会执行合并逻辑,将所有片段按序拼接,还原为最初的沙盘录像视频。
有了分片与文件哈希,断点续传的实现便水到渠成。当遇到意外断网导致上传终止时,临时目录中已经保存了成功接收的部分片段。
当网络恢复,用户重新尝试上传该文件时,前端向服务端发送一个包含 MD5 值的校验请求,询问当前文件的上传进度。后端查询临时记录后返回已接收的分片序号列表。前端据此跳过已存在的数据块,仅从断点处继续上传剩余的分片。这样不仅节省了时间,也极大地改善了用户的等待体验。
文件秒传机制的延伸
基于 MD5 指纹的校验体系还能衍生出一种极具效率的“秒传”功能。在实际教学环境中,有时会存在多名教师共同管理或重复上传同一个公开课教学视频的情况。
当第二位教师选中该视频并触发上传时,前端照常发送校验请求。后端在数据库中比对 MD5 值后发现,该文件实际上早已完整存储于服务器中。此时,后端会直接返回文件已存在的状态。前端接收到确认后,即可将进度条直接置为 100%,无需再传输任何物理数据块,从而在应用层面上实现了“秒传”。
面对企业级 B 端应用中不可避免的弱网环境与大文件传输需求,采用分片切割、多路并发以及基于 MD5 的续传和秒传机制,是构建稳定数据通道的必要技术。这套方案已经在橙星云的多媒体数据归档模块中得到应用,有效降低了上传失败率,保障了教师在维护大体量心理档案时的工作效率。
