分片上传
- 将大文件分割成多个小片(chunk),逐个上传。
- 每个片上传成功后,服务器可以返回确认信息。
- 所有片上传完成后,服务器端将这些片重新组合成原始文件。
以下是一个简单的分片上传的前端实现示例:
function uploadFile(file) {
const CHUNK_SIZE = 1 * 1024 * 1024; // 1MB
let currentChunk = 0;
const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
function uploadChunk() {
const start = currentChunk * CHUNK_SIZE;
const end = Math.min(file.size, start + CHUNK_SIZE);
const chunk = file.slice(start, end);
const formData = new FormData();
formData.append('file', chunk);
formData.append('fileName', file.name);
formData.append('chunkIndex', currentChunk);
formData.append('totalChunks', totalChunks);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
currentChunk++;
if (currentChunk < totalChunks) {
uploadChunk(); // 递归上传下一片
} else {
console.log('上传完成');
}
} else {
console.error('上传失败', data.message);
}
})
.catch(error => {
console.error('上传错误', error);
});
}
uploadChunk();
}
在服务器端,你需要处理接收到的片,存储这些片,并在所有片都上传完成后将它们合并。具体的服务器端实现取决于你使用的后端技术栈。