大文件上传实现
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; // 每个切片的大小为1MBconst 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>
