悠悠楠杉
网站页面
文章：提升用户体验：实现文件分片上传
06/03
引言
在Web应用中，用户经常需要上传大文件，如高清图片、视频或大型文档。传统的单次上传方式在处理大文件时会导致浏览器假死、网络超时等问题，严重影响用户体验。为了解决这一问题，我们可以采用文件分片上传技术，将大文件分割成多个小部分，逐一上传。
1. 准备工作
- HTML部分：创建一个简单的HTML页面，包含文件选择和上传按钮。
- JavaScript部分：使用AJAX和
FormData实现文件的分片、上传及合并逻辑。
2. HTML代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件分片上传示例</title>
</head>
<body>
<h1>文件分片上传</h1>
<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">上传文件</button>
<script src="upload.js"></script>
</body>
</html>
3. JavaScript代码（upload.js）
```javascript
function uploadFiles() {
const fileInput = document.getElementById('fileInput');
const files = fileInput.files; // 获取选中的文件列表
const chunkSize = 1024 * 1024 * 5; // 分片大小，例如5MB
const url = '/upload'; // 后端接收文件的API地址
let offset = 0; // 起始位置
let intervalId = null; // 用于定时器
let currentChunk = 0; // 当前上传的片数
let totalChunks = Math.ceil(files[0].size / chunkSize); // 总片数
let fileData = new FormData(); // 用于存放分片数据和元信息（如总片数）的FormData对象
fileData.append('file', files[0]); // 添加文件到FormData对象中
fileData.append('totalChunks', totalChunks); // 添加总片数到FormData对象中
fileData.append('chunkIndex', currentChunk); // 当前片数索引（当前是第0个）
function uploadChunk() {
if (offset < files[0].size) {
const chunk = files[0].slice(offset, offset + chunkSize); // 分割文件为多个部分并创建Blob对象
fileData.deleteAll(); // 清空前一次的data以防止重复添加（如总片数）
fileData.append('chunk', chunk); // 添加当前片到FormData对象中
fileData.append('totalChunks', totalChunks); // 再次添加总片数以供后端验证当前是否为最后一片（可选）
fileData.append('chunkIndex', currentChunk); // 再次添加当前片数索引（每次调用都会增加）
fetch(url, { method: 'POST', body: fileData }) // 发送分片到服务器
.then(response => response.json()) // 处理响应数据（如成功或错误信息）
.then(data => {
console.log('Chunk ' + currentChunk + ' uploaded: ', data); // 打印分片上传信息（包括服务器返回的数据）
offset += chunkSize; // 更新偏移量以准备下一片数据上传（或更新总偏移量后进行下一步）
currentChunk++; // 更新当前片数索引以供下一次调用使用（增加并循环）
if (currentChunk < totalChunks) { // 如果还有未上传的片数则继续调用自身进行下一片的上传操作（循环）
intervalId = setTimeout(uploadChunk, 1000); // 设置定时器以避免过快地多次请求（可以优化为更精细的等待逻辑或根据实际情况取消）
} else { // 如果所有片都已上传则清除定时器（或进行其他清理操作）
console.log('All chunks uploaded successfully.'); // 打印所有片都已成功上传的信息（可选）
clearInterval(intervalId); // 清除定时器（实际场景中应清理所有相关资源，如网络连接等）
// 可以根据实际需要在此处添加合并文件、检查上传完成等逻辑的代码... ... [继续] ... } } ); } ); } } else { ... } } ); } }); } } ); } } ) } ); } } ) } }); }); } } ); } ) }); }); }); }); }); } ) ); ... [结束] ... 注释和解释可优化此处的代码可读性和功能性...} ... [解释] ...}...) ... [这里描述了JavaScript中通过定时器调用`uploadChunk`函数来按块发送大文件的逻辑]... [注释指出，根据服务器响应可以优化错误处理和进度反馈]... [最后给出了一个结束句，说明如何处理所有片段都成功上传后的逻辑]
