写一段大文件上传的前端代码
时间: 2024-05-04 17:01:33 浏览: 11
以下是一个示例大文件上传的前端代码:
HTML:
```
<input type="file" id="file-input" multiple>
<button id="upload-button">Upload</button>
<progress id="upload-progress" value="0" max="100"></progress>
```
JavaScript:
```
const CHUNK_SIZE = 10 * 1024 * 1024; // 10 MB
const fileInput = document.getElementById("file-input");
const uploadButton = document.getElementById("upload-button");
const uploadProgress = document.getElementById("upload-progress");
let file = null;
let totalChunks = 0;
let uploadedChunks = 0;
fileInput.addEventListener("change", () => {
file = fileInput.files[0];
totalChunks = Math.ceil(file.size / CHUNK_SIZE);
});
uploadButton.addEventListener("click", async () => {
if (!file) {
alert("Please select a file first.");
return;
}
uploadButton.disabled = true;
for (let i = 0; i < totalChunks; i++) {
const start = i * CHUNK_SIZE;
const end = Math.min(start + CHUNK_SIZE, file.size);
const chunk = file.slice(start, end);
await uploadChunk(chunk, i);
uploadedChunks++;
const progress = Math.round((uploadedChunks / totalChunks) * 100);
uploadProgress.value = progress;
}
uploadButton.disabled = false;
});
async function uploadChunk(chunk, index) {
const formData = new FormData();
formData.append("chunk", chunk);
formData.append("index", index);
formData.append("totalChunks", totalChunks);
await fetch("/upload", {
method: "POST",
body: formData,
});
}
```
这段代码定义了一个常量 `CHUNK_SIZE`,表示每个分片的大小。当用户选择一个文件后,会计算出需要分成多少个分片,并保存到变量 `totalChunks` 中。
当用户点击上传按钮时,会依次上传每个分片,并更新上传进度条。上传分片的函数 `uploadChunk` 使用了 `FormData` 对象来构建请求体,包含了当前分片的数据、当前分片的索引和总分片数。上传请求使用了 `fetch` 函数,发送到服务器的地址为 `/upload`。
注意,这段代码仅仅是一个示例,实际的大文件上传需要考虑更多的细节,例如分片上传的顺序、错误处理、断点续传等。