在 JavaScript 中，实现大文件断点续传的方式通常是使用 HTML5 的 File API 和 XMLHttpRequest（或 Fetch API）。以下是使用这些技术实现大文件断点续传的基本步骤：
- 首先，使用 File API 读取要上传的大文件。可以使用
Blob.slice()方法将文件分割成较小的分块。
const file = document.getElementById('fileInput').files[0]; // 从 input file 获取文件
const chunkSize = 1024 * 1024 * 5; // 定义分块大小，例如 5MB
const chunks = Math.ceil(file.size / chunkSize); // 计算文件需要分割的块数
- 使用 XMLHttpRequest（或 Fetch API）将每个分块依次发送到服务器。在发送分块之前，需要检查服务器上已经接收到的分块数量，从而实现断点续传功能。
let currentChunk = 0; // 当前要上传的分块索引
function uploadChunk() {
if (currentChunk >= chunks) {
console.log('上传完成');
return;
}
const start = currentChunk * chunkSize; // 当前分块的起始字节
const end = Math.min(file.size, start + chunkSize); // 当前分块的结束字节
const blob = file.slice(start, end); // 获取当前分块的 Blob 对象
// 创建 FormData 对象，将当前分块和相关信息添加到 FormData 对象中
const formData = new FormData();
formData.append('file', blob);
formData.append('filename', file.name);
formData.append('currentChunk', currentChunk);
formData.append('totalChunks', chunks);
// 使用 XMLHttpRequest 发送分块到服务器
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function () {
if (xhr.status === 200) {
console.log('分块上传成功，继续上传下一个分块');
currentChunk++;
uploadChunk();
} else {
console.log('分块上传失败，重试当前分块');
uploadChunk();
}
};
xhr.send(formData);
}
// 开始上传第一个分块
uploadChunk();
- 在服务器端，需要接收并处理这些分块。可以将每个分块保存为临时文件，然后在所有分块传输完成后，将这些临时文件合并成一个完整的文件。
这只是一个基本的实现示例。在实际项目中，还需要考虑其他因素，如错误处理、进度显示以及并发上传等。另外，也可以使用第三方库，如 resumable.js 或 tus-js-client，来实现断点续传功能。
