本地化视频分片上传-基于CRMEB的开发思路-优快云博客

一、引言

在一般的产品开发过程中，常常会遇到上传视频功能的需求。通常大家采用对视频大小进行限制等方法，来防止上传请求超时导致上传失败。而采用视频分片上传的方式，可以对项目有一个小小的体验优化。本文前端使用 Vue，后台基于 PHP 进行分片上传，有需要的小伙伴可以借鉴。

二、分片上传概述

（一）定义

分片上传是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（我们称之为 Part）来进行分别上传，上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件。

（二）应用场景

大文件上传：当需要上传的文件较大时，分片上传有助于提高上传的成功率和效率。
网络环境不佳，存在需要重传风险的场景：在不稳定的网络环境下，分片上传可以降低因网络中断等原因导致整个文件上传失败的风险，因为即使部分分片上传失败，也只需重新上传失败的分片，而不必重新上传整个文件。

三、实现流程步骤

（一）方案一（常规步骤、本文实现的步骤）

分割文件：将需要上传的文件按照一定的分割规则，分割成相同大小的数据块。
初始化上传任务：初始化一个分片上传任务，返回本次分片上传唯一标识，该标识用于后续关联各个分片的上传以及服务端对分片的整合操作。
发送分片数据块：按照一定的策略（串行或并行）发送各个分片数据块，将分割好的文件数据块依次上传到服务端。
合成原始文件：发送完成后，服务端根据判断数据上传是否完整，如果完整，则进行数据块合成得到原始文件，完成整个文件的分片上传过程。

（二）方案二

前端分片及请求准备：前端（客户端）需要根据固定大小对文件进行分片，请求后端（服务端）时要带上分片序号和大小，以便服务端准确识别和处理每个分片。
服务端记录分块位置：服务端创建 conf 文件用来记录分块位置，conf 文件长度为总分片数，每上传一个分块即向 conf 文件中写入一个 127（Byte.MAX_VALUE），那么没上传的位置就是默认的 0，已上传的就是 127，这步是实现断点续传和秒传的核心步骤，通过该文件可以清晰记录每个分块的上传状态。
服务端写入文件：服务器按照请求数据中给的分片序号和每片分块大小（分片大小是固定且一样的）算出开始位置，与读取到的文件片段数据，写入文件，将各个分片按正确的顺序和位置组合成完整的文件。

四、前端代码实现

（一）模板部分

使用 Vue 的 Upload 组件，相关配置如下：

<Upload
  :show-upload-list="false"
  :action="fileUrl2"
  :before-upload="videoSaveToUrl" // 分片上传处理方法
  :data="uploadData" // 上传时需要携带的参数例如 token 之类的
  :headers="header" // 请求头
  :multiple="true" // 上传按钮样式相关，是否支持多选等可根据实际需求调整
></Upload>

（二）方法部分

引入方