大文件分片上传是为了避免一次性上传大文件可能带来的各种问题（如网络不稳定导致的传输失败、服务器端接收缓慢等），将文件分割成多个小块（即分片），分片依次上传，最终在服务器端将所有分片重新合并成完整文件。下面是实现大文件分片上传的原理详解：
1. 文件分片
文件分片是将大文件按照一定大小（如1MB或5MB）切分成多个小片段。可以使用JavaScript中的Blob对象来实现分片：
const file = document.getElementById('fileInput').files[0]; // 获取文件
const chunkSize = 5 * 1024 * 1024; // 每个分片大小为5MB
const chunks = Math.ceil(file.size / chunkSize); // 分片总数
for (let i = 0; i < chunks; i++) {
const start = i * chunkSize;
const end = Math.min(file.size, start + chunkSize);
const chunk = file.slice(start, end); // 创建分片
// 这里可以将分片保存到一个数组中或直接上传
}
2. 上传分片
每个分片通过XMLHttpRequest或fetch API上传到服务器。可以为每个分片生成唯一标识符，以便服务器能够正确合并：
const uploadChunk = (chunk, index) => {
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('index', index);
formData.append('fileName', file.name);
fetch('/upload', {
method: 'POST',
body: formData,
}).then(response => {
if (response.ok) {
console.log(`Chunk ${index} uploaded successfully`);
} else {
console.error(`Failed to upload chunk ${index}`);
}
}).catch(error => {
console.error(`Error uploading chunk ${index}:`, error);
});
};
3. 合并分片
服务器接收到所有分片后，需要将它们按照顺序合并成一个完整的文件。
涉及js全部代码地址如下：
https://download.csdn.net/download/u012953777/89540795
