vue切片上传

### Vue 实现文件切片上传的解决方案 在 Vue 中实现文件切片上传功能，通常涉及前端对大文件进行分片处理，并通过 HTTP 请求将每个分片发送到后端。后端需要能够接收这些分片并最终将其合并为完整的文件。以下是实现这一功能的核心步骤和技术要点： #### 1. 文件切片逻辑 在前端，可以使用 JavaScript 的 `Blob` 对象来对文件进行切片操作。以下是一个简单的示例代码[^2]： ```javascript function createFileChunk(file, chunkSize = 10 * 1024 * 1024) { // 默认每片10MB const chunks = []; let cur = 0; while (cur < file.size) { chunks.push(file.slice(cur, cur + chunkSize)); cur += chunkSize; } return chunks; } ``` #### 2. 使用 Axios 发送切片 通过 Axios 将切片逐一上传至服务器。可以设置并发限制以避免过多请求同时发送，影响性能。以下是一个示例代码[^2]： ```javascript async function uploadChunks(chunks, fileHash, filename) { for (let i = 0; i < chunks.length; i++) { const formData = new FormData(); formData.append('chunk', chunks[i]); formData.append('hash', fileHash); formData.append('filename', filename); formData.append('chunkIndex', i); try { await axios.post('/upload/chunk', formData, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: progressEvent => { const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); console.log(`Chunk ${i} uploaded: ${percentCompleted}%`); } }); } catch (error) { console.error(`Failed to upload chunk ${i}:`, error); // 可以在此处实现重试逻辑 } } } ``` #### 3. 断点续传与秒传支持 为了实现断点续传，可以在上传前检查服务器是否已存在部分切片。如果存在，则跳过这些切片的上传。秒传可以通过计算文件的哈希值并与服务器上的文件哈希值对比来实现[^4]。 ```javascript async function checkUploadedChunks(fileHash) { const { data } = await axios.get(`/upload/check?hash=${fileHash}`); return data.uploadedChunks || []; // 返回已上传的切片索引数组 } ``` #### 4. 后端接口设计 后端需要提供以下接口： - **文件初始化**：接收文件基本信息（如文件名、大小、哈希值），返回已上传的切片列表。 - **文件数据上传**：接收单个切片数据并保存。 - **文件上传完毕**：当所有切片上传完成后，通知后端合并文件[^3]。 #### 5. 错误处理与重试机制 在上传过程中可能会遇到网络中断或其他错误，因此需要实现重试机制。可以通过捕获 Axios 请求的错误并重新调用上传函数来实现。 ```javascript function retryUpload(chunk, maxRetries = 3) { let retries = 0; return new Promise((resolve, reject) => { function attempt() { axios.post('/upload/chunk', chunk) .then(resolve) .catch(error => { if (retries++ < maxRetries) { console.warn(`Retry ${retries} for chunk...`); setTimeout(attempt, 1000); // 延迟1秒重试 } else { reject(error); } }); } attempt(); }); } ``` #### 6. 用户交互与进度条显示 可以结合 Vue 的状态管理来更新上传进度，并通过组件库（如 Element Plus 或 Ant Design Vue）展示进度条[^5]。 ```vue <template> <div> <el-progress :percentage="uploadProgress" /> </div> </template> <script> export default { data() { return { uploadProgress: 0, }; }, methods: { updateProgress(loaded, total) { this.uploadProgress = Math.round((loaded / total) * 100); }, }, }; </script> ``` --- ###