前端使用 SparkMD5 实现分片上传与断点续传
在现代web开发中，文件上传是一个常见但复杂的任务。尤其是当文件较大时，用户体验就显得尤为重要。本文将指导你如何在前端实现“分片上传”和“断点续传”，使用SparkMD5来确保文件完整性。
上传流程概述
下面的表格展示了实现前端分片上传和断点续传的基本流程：
| 步骤 | 说明 |
|---|---|
| 1 | 选择文件并获取文件信息 |
| 2 | 计算文件的MD5值 |
| 3 | 分割文件为多个小块 |
| 4 | 发送每个小块到服务器 |
| 5 | 在服务器端保存上传状态以支持断点续传 |
详细步骤
1. 选择文件并获取文件信息
使用<input>元素让用户选择文件，并获取相关信息。
// 选择文件
const fileInput = document.getElementById('fileInput');
let file;
// 当用户选择文件时，获取文件信息
fileInput.addEventListener('change', (event) => {
file = event.target.files[0]; // 获取用户选择的文件
console.log('选择的文件:', file);
});
2. 计算文件的MD5值
使用SparkMD5库来计算文件的MD5值。
// 引入SparkMD5
const SparkMD5 = require('spark-md5');
// 计算文件MD5
const calculateMD5 = (file) => {
return new Promise((resolve) => {
const spark = new SparkMD5.ArrayBuffer();
const reader = new FileReader();
reader.onload = (e) => {
spark.append(e.target.result); // 读取文件内容
resolve(spark.end()); // 返回MD5值
};
reader.readAsArrayBuffer(file); // 读取为ArrayBuffer
});
};
3. 分割文件为多个小块
通过JavaScript将文件分割为多个小块。
const chunkSize = 1024 * 1024; // 每个块的大小为1MB
const generateChunks = (file) => {
const chunks = [];
let currentChunkStart = 0;
while (currentChunkStart < file.size) {
const chunk = file.slice(currentChunkStart, currentChunkStart + chunkSize);
chunks.push(chunk); // 将块添加到数组
currentChunkStart += chunkSize; // 移动到下一个块
}
return chunks;
};
4. 发送每个小块到服务器
采用XMLHttpRequest或fetch 提交每个小块。
const uploadChunk = async (chunk, index, totalChunks) => {
// 创建FormData并附加文件块及相关信息
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('index', index); // 当前块索引
formData.append('totalChunks', totalChunks); // 总块数
await fetch('/upload', {
method: 'POST',
body: formData
}); // 发送块到服务器
};
5. 保存上传状态以支持断点续传
保证服务器能够保存已上传的块信息，以支持断点续传。
// 代码示例 - 服务器端逻辑
app.post('/upload', (req, res) => {
const { index, totalChunks } = req.body;
// 保存块信息到服务器
// 检查已上传的块并返回
// 此处省略具体实现
});
关系图
erDiagram
USER ||--o{ FILE : uploads
FILE ||--o{ CHUNK : contains
CHUNK ||--|| SERVER : handles
结尾
通过上述步骤，你已掌握了如何在前端实现分片上传和断点续传。整体流程使用了SparkMD5来保证文件完整性，分割文件为多个小块，并逐个发送到服务器。这样做不仅提升了用户体验，还使大文件上传变得高效简单。希望这些知识能够帮助你在今后的开发中更好地处理文件上传的问题！
