前端20g大文件上传

### 前端实现20GB大文件上传的技术方案 #### 技术背景 对于前端实现20GB的大文件上传，通常采用分片上传技术来解决单次传输过大导致的网络不稳定、耗时过长等问题。通过将大文件拆分为多个较小的片段分别上传，可以显著提升效率并支持断点续传功能。 #### 分片上传的核心原理 分片上传的主要目标是提高文件上传的速度和稳定性。具体来说，可以通过以下方式实现： - **文件切片**：利用 `File` 对象的 API (`slice()` 或者 `Blob`) 来切割文件为若干个小块[^1]。 - **并发控制**：通过设置合理的并发数，避免一次性发送过多请求造成浏览器卡顿或服务器压力过大[^2]。 - **进度监控**：基于 XMLHttpRequest 的 `onprogress` 事件实时更新上传进度条。 - **断点续传**：记录已成功上传的分片信息，在失败后仅重试未完成的部分[^3]。 #### 示例代码 以下是基于上述理论的一个简单实现案例： ```javascript // HTML 部分 <el-upload drag :http-request="customUpload" action="" > 将文件拖到此处，或点击上传 </el-upload> // JavaScript 部分 export default { data() { return { file: null, chunkSize: 1 * 1024 * 1024, // 每个分片大小设为1MB uploadedChunks: [], // 已经上传成功的chunk列表 totalChunks: 0 // 总共需要上传多少个chunks }; }, methods: { customUpload({ file }) { this.file = file; const spark = new SparkMD5.ArrayBuffer(); // 使用spark-md5计算hash值用于唯一标识该文件 let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice; function loadNextChunk(startByte) { const endByte = Math.min(startByte + this.chunkSize - 1, this.file.size); const reader = new FileReader(); reader.onload = (e) => { spark.append(e.target.result); if(endByte === this.file.size){ console.log('file hash:', spark.end()); uploadChunks(); }else{ loadNextChunk.call(this, endByte + 1); } }; reader.readAsArrayBuffer(blobSlice.call(file, startByte, endByte)); } loadNextChunk.call(this, 0); async function uploadChunks(){ self.totalChunks = Math.ceil(self.file.size / self.chunkSize); for(let i=0;i<self.totalChunks;i++){ await sendRequest(i).catch(err=>console.error(`Failed to upload chunk ${i}`, err)) } checkCompletionStatus().then(() => alert('All chunks have been successfully uploaded')); } function sendRequest(index){ return new Promise((resolve,reject)=>{ const formData = new FormData(); const start = index * self.chunkSize; const end = Math.min(start+self.chunkSize,this.file.size)-1; const chunk = blobSlice.call(this.file,start,end+1); formData.append('file',chunk,'filename'); formData.append('index',index.toString()); axios.post('/upload-chunk-endpoint',formData,{ onUploadProgress:(progressEvent)=>updateProgressBar(progressEvent,index), headers:{'Content-Type':'multipart/form-data'} }).then(res=>{ resolve(res.data); }).catch(reject); }); } function updateProgressBar(event,index){ const percentCompleted = Math.round((event.loaded * 100)/ event.total ); console.log(`Chunk ${index} is at ${percentCompleted}%`); } function checkCompletionStatus(){ return axios.get(`/check-completion?hash=${spark.end()}&totalChunks=${self.totalChunks}`) .then(response =>{ response.data.failedIndexes.forEach(failedIndex => retryFailedChunk(failedIndex)); }) } function retryFailedChunk(index){ return sendRequest(index); } } } } ``` 此代码展示了如何使用 Vue.js 和 Element UI 组件库创建自定义上传逻辑，并结合 Axios 发送 HTTP 请求以及处理上传过程中的各种状态变化。 #### 注意事项 - 确保前后端约定一致的数据结构与协议，比如每一块数据包携带的信息字段（如索引号）、错误码解释等。 - 考虑增加超时机制防止长时间无响应的情况发生；同时也要注意跨域资源共享(CORS)策略可能带来的影响。