uniapp 分片上传

### UniApp 中实现分片上传文件并支持断点续传 在现代移动应用开发中，尤其是对于大型应用程序而言，能够有效地管理文件的上传至关重要。为了提高用户体验和网络效率，在UniApp框架下采用分片上传技术是一个明智的选择。这种方式不仅提高了传输速度，还增强了系统的稳定性和可靠性。 #### 准备工作 确保项目环境中已经安装了必要的依赖项，并配置好服务器端来接收来自客户端的数据包。考虑到跨平台特性，这里推荐使用Axios作为HTTP请求工具[^1]。 #### 客户端逻辑设计 ##### 初始化设置 定义全局变量用于存储文件信息、每一片大小（chunkSize）、总数量等参数： ```javascript let file; // 当前待上传文件对象 const chunkSize = 1024 * 1024; // 单个分片字节数量，默认设为1MB let chunksTotal = Math.ceil(file.size / chunkSize); // 计算总共需要分成多少份 ``` ##### 获取已上传状态 当用户尝试再次提交相同名称或路径下的文件时，应该先查询服务端是否存在未完成的任务记录。通过发送`GET`请求到特定API接口获取当前进度详情： ```javascript axios.get('/api/upload/status', { params: { fileName: file.name } }).then(response => { const uploadedChunks = response.data.uploaded; }); ``` 此过程有助于减少不必要的重复劳动，同时也实现了真正的断点恢复功能[^2]。 ##### 构建并发送数据片段 遍历整个文件流，按照设定好的尺寸切割成多个子集；针对每一个独立的部分发起单独的POST请求至指定地址： ```javascript for (let i = 0; i < chunksTotal; ++i) { let startByte = i * chunkSize, endByte = ((startByte + chunkSize) >= file.size ? file.size : (startByte + chunkSize)); axios.post('/api/upload/chunk', new FormData().append('file', file.slice(startByte, endByte)), { headers: {'Content-Type': 'multipart/form-data'}, onUploadProgress(progressEvent){ console.log(`Uploading ${Math.round((progressEvent.loaded / progressEvent.total)*100)}%`); } }).catch(error=>console.error("Error:", error)); } ``` 注意这里的`onUploadProgress()`回调函数可以实时监控每一次传输的状态变化情况，从而提供给用户更直观的操作反馈[^3]。 #### 服务端处理流程 以SpringBoot为例说明后台应如何配合上述方案运作： - 接收到来自前端传送过来的信息后立即保存临时副本； - 对于每次接收到的新批次内容都要做校验对比，防止中途被篡改； - 最终将所有零散组件拼合起来形成完整的原始资料存档入库[^4]。 ---