vue2断点续传

### Vue2 中实现断点续传的功能 在 Vue2 中实现断点续传功能，通常需要结合前端文件分片上传与后端的存储逻辑来完成。以下是实现该功能的核心思路和代码示例。 #### 1. 文件分片处理 文件分片是断点续传的基础，通过将大文件分割成多个小片段（chunk），可以逐个上传这些片段，并支持中断后再继续上传未完成的部分。 ```javascript function createFileChunk(file, chunkSize = 10 * 1024 * 1024) { // 默认每片10MB const fileChunks = []; let cur = 0; while (cur < file.size) { fileChunks.push({ file: file.slice(cur, cur + chunkSize), index: fileChunks.length }); cur += chunkSize; } return fileChunks; } ``` #### 2. 前端上传逻辑 前端需要向后端发送文件初始化请求，获取已上传的分片信息，并根据返回的结果决定哪些分片需要重新上传。 ```javascript async function uploadFile(file) { const fileChunks = createFileChunk(file); const hash = await calculateFileHash(file); // 计算文件唯一标识 // 初始化文件上传，检查已有分片 const uploadedChunks = await checkUploadedChunks(hash); for (const chunk of fileChunks) { if (!uploadedChunks.includes(chunk.index)) { await uploadChunk(chunk, hash); // 上传未完成的分片 } } // 通知后端文件上传完成 await finishUpload(hash); } // 检查已上传分片 async function checkUploadedChunks(hash) { const res = await fetch('/api/check', { method: 'POST', body: JSON.stringify({ hash }), headers: { 'Content-Type': 'application/json' } }); return res.json(); } // 上传单个分片 async function uploadChunk(chunk, hash) { const formData = new FormData(); formData.append('chunk', chunk.file); formData.append('hash', hash); formData.append('index', chunk.index); await fetch('/api/upload', { method: 'POST', body: formData }); } // 完成上传 async function finishUpload(hash) { await fetch('/api/finish', { method: 'POST', body: JSON.stringify({ hash }), headers: { 'Content-Type': 'application/json' } }); } ``` #### 3. 文件哈希计算 为了确保文件的唯一性，可以通过计算文件的哈希值来标识每个文件。 ```javascript function calculateFileHash(file) { return new Promise((resolve, reject) => { const spark = new SparkMD5.ArrayBuffer(); const fileReader = new FileReader(); fileReader.onload = function (e) { spark.append(e.target.result); resolve(spark.end()); }; fileReader.onerror = function () { reject('Failed to read the file'); }; fileReader.readAsArrayBuffer(file); }); } ``` #### 4. 后端接口设计 后端需要提供以下接口以支持断点续传功能： - **文件初始化接口**：接收文件哈希值，返回已上传的分片列表。 - **分片上传接口**：接收单个分片数据并保存。 - **上传完成接口**：当所有分片上传完成后，合并分片生成完整文件。 #### 5. 断点续传的关键点 - 文件分片大小应根据实际需求设置，过大或过小都会影响性能[^1]。 - 前端需要记录文件上传状态，包括已上传分片和失败分片。 - 后端需支持分片存储、状态查询及最终文件合并。 ```python # 示例：后端合并分片逻辑（Python Flask） @app.route('/api/merge', methods=['POST']) def merge_chunks(): data = request.json file_hash = data['hash'] chunks_dir = os.path.join(CHUNKS_DIR, file_hash) target_file = os.path.join(UPLOAD_DIR, f"{file_hash}.mp4") with open(target_file, 'wb') as f: for i in range(len(os.listdir(chunks_dir))): chunk_path = os.path.join(chunks_dir, str(i)) with open(chunk_path, 'rb') as chunk: f.write(chunk.read()) return jsonify({'status': 'success'}) ``` ### 注意事项 - 确保前后端通信稳定，避免因网络问题导致上传失败。 - 在实际开发中，建议对文件上传过程加入进度条显示功能，提升用户体验[^2]。