vue3 大文件上传

### Vue3 中实现大文件分片上传的最佳实践 #### 1. 文件分片逻辑设计 为了提高上传效率并减少网络波动带来的影响，在前端可以将大文件分割成多个较小的片段进行逐个上传。通过这种方式，即使某个片段失败也只需重新上传该部分而无需重头再来。 ```javascript function createFileChunk(file, size = 1 * 1024 * 1024) { // 默认每片大小设为1MB const fileChunks = []; let cur = 0; while (cur < file.size) { fileChunks.push({file: file.slice(cur, cur + size)}); cur += size; } return fileChunks; } ``` #### 2. 使用FormData对象封装数据提交给服务端 当涉及到二进制流形式的数据传输时（比如图片、视频），推荐采用`FormData`接口来构建POST请求体中的键值对集合[^3]。 ```javascript async function uploadChunks(chunks){ chunks.forEach(async(chunk,index)=>{ const formData=new FormData(); formData.append('chunkIndex',index); formData.append('totalChunks',chunks.length); formData.append('filename','yourFileName'); formData.append('file',new Blob([chunk.file])); await axios.post('/api/upload-chunk',formData,{ headers:{'Content-Type':'multipart/form-data'} }); }) } ``` #### 3. 断点续传机制的设计 考虑到可能出现的各种异常情况中断了整个过程，则可以在每次成功完成一片之后记录下当前进度；当下次继续操作时先查询已存在的切片信息再决定是从哪里开始追加还是全部重做。 ```javascript // 假定存在一个API用于获取已完成的分片列表 axios.get(`/api/get-completed-chunks?fileName=yourFileName`).then(response=>{ const completedIndices=response.data.map(item=>item.chunkIndex); // 只上传未完成的部分 const pendingChunks=fileChunks.filter((_,idx)=>!completedIndices.includes(idx)); uploadChunks(pendingChunks).catch(err=>console.error(`Error during chunk uploading:${err}`)) }) ``` #### 4. 合并所有接收到的碎片形成完整的原始文档 一旦所有的子单元都被正确接收下来以后，就需要在后台执行拼接动作恢复出最初的资源副本。