大文件上传实现
1.将文件切割成多个小文件
2.将小文件上传到服务器
3.后端将小文件合并成一个大文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>大文件上传</title>
</head>
<body>
<input type="file" id="file" />
<button id="upload">上传</button>
<script>
const fileInput = document.getElementById("file");
const uploadBtn = document.getElementById("upload");
uploadBtn.addEventListener("click", () => {
const file = fileInput.files[0];
const chunkSize = 1024 * 1024; // 每个切片的大小为1MB
const chunks = Math.ceil(file.size / chunkSize); // 计算切片的数量
for (let i = 0; i < chunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, file.size);
const chunk = file.slice(start, end); // 切割文件
// 将切片上传到服务器
uploadChunk(chunk, i, chunks);
}
});
function uploadChunk(chunk, index, totalChunks) {
const formData = new FormData();
formData.append("file", chunk);
formData.append("index", index);
formData.append("totalChunks", totalChunks);
// 打印切片的信息
console.log(`切片${index + 1}/${totalChunks}：${chunk.size}字节`);
// 发送POST请求将切片上传到服务器
// fetch("/upload", {
// method: "POST",
// body: formData,
// })
// .then((res) => res.json())
// .then((data) => {
// console.log(data);
// });
}
</script>
</body>
</html>