大厂是真的喜欢考大文件上传。以下我将带大家详细梳理大文件上传的核心知识点及相关解决方案，帮助大家全面覆盖大厂面试题考点。
一、大文件上传的难点
-
网络不稳定：由于网络的不可靠性，大文件上传过程中极易因网络波动、中断等情况导致上传失败，这就要求上传方案必须支持断点续传功能，以保障上传的稳定性。
-
性能问题：直接上传大文件会大量占用服务器的带宽资源，可能导致服务器负载过高，影响系统整体性能。同时，大文件上传所需的较长时间也会占用客户端资源，甚至可能造成客户端卡顿。
-
超时问题：HTTP 协议对请求设置了超时时间限制，大文件上传由于数据量庞大，传输时间长，很容易超出这个超时时间，导致上传失败。
-
进度反馈：长时间的上传过程中，用户需要实时了解上传进度，以获得良好的用户体验，因此如何准确地反馈上传进度也是大文件上传需要解决的问题之一。
-
存储与安全：需要确保上传的文件在存储过程中的安全性，防止恶意文件或病毒通过上传操作入侵系统，同时要保障文件内容不被篡改。
二、常见解决方案
（一）分片上传（Chunked Upload）
-
原理：将大文件分割成多个小块（chunk），逐块进行上传，服务器在接收所有小块后再将它们合并成完整的文件。
-
优点 ：支持断点续传，当某个分片上传失败时，只需重新上传该分片，而无需重新上传整个文件；能够实现进度控制，通过已上传分片的数量和总分片数量可精确计算上传进度；支持失败重试，提高上传的成功率。
-
前端实现：
-
使用 HTML5 的 File API 读取文件，获取文件对象。
-
通过 JavaScript 利用 Blob.slice 方法对文件进行分片。例如：
ini
function createChunk(file, size = 2 * 1024 * 1024) {
const chunkList = [];
let cur = 0;
while (cur < file.size) {
chunkList.push({ file: file.slice(cur, cur + size) });
cur += size;
}
return chunkList;
}-
每个分片上传时，带上文件唯一标识（如文件名的哈希值）和分片序号，以便后端能够正确识别和合并分片。
-
使用 XMLHttpRequest 或 fetch API 逐个发送每个分片。
- 后端实现：
-
接收前端传来的每个文件分片，并将其存储在服务器的临时目录。
-
维护一个状态记录，用于记录每个分片的上传状态，确保所有分片都已成功接收。
-
当所有分片上传完成后，根据分片序号将这些分片合并成完整的文件。
（二）断点续传
-
原理：记录已上传分片的状态，当网络中断或上传失败后，可以从中断的位置继续上传未完成的部分，避免重复上传已成功的分片。
-
前端实现：
-
在上传前，前端向后端询问哪些分片已经上传。通常通过发送包含文件唯一标识（如 MD5 值）的请求，后端根据该标识查询已上传的分片记录并返回给前端。
-
前端仅上传未完成的分片，减少不必要的上传流量。
- 后端实现：
-
通过数据库或缓存记录每个分片的上传状态，以文件唯一标识作为索引。
-
当接收到前端的查询请求时，根据记录返回已上传的分片列表。
（三）秒传
-
原理：通过计算文件的唯一标识（如 MD5、SHA256 等哈希值），与服务器已存储文件的哈希值进行比对。若服务器上已存在相同哈希值的文件，则认为该文件已上传过，直接跳过上传过程，实现秒传。
-
前端实现：
-
在选择文件后，前端立即计算文件的哈希值。计算哈希值可以使用一些现成的库，如 spark-md5。
-
将计算得到的哈希值发送给后端进行校验。
- 后端实现：
-
接收前端传来的哈希值，查询数据库或文件存储系统中是否存在相同哈希值的文件。
-
如果存在，返回已上传成功的响应给前端；如果不存在，则进入正常的上传流程。
（四）大文件分发与存储优化
- 存储优化：
-
结合 CDN（内容分发网络）进行文件分发。CDN 在全球各地部署了众多节点，能够将文件缓存到离用户最近的节点，大大提升文件的下载速度，减少用户等待时间。
-
采用直传云存储的方式，前端直接将文件上传到云存储服务（如阿里云 OSS、腾讯云 COS 等），避免占用后端服务器带宽，同时云存储服务通常提供了高可用性和数据安全保障。
- 直传云存储流程：
-
前端向后端请求上传凭证，凭证包含了访问云存储的必要信息，如密钥、桶名称、上传路径等。
-
前端使用获取到的凭证直接向云存储服务发起上传请求，将文件上传到指定位置。
-
上传完成后，云存储服务返回上传结果给前端，前端再将结果通知后端。
三、进阶优化
（一）进度显示
- 使用分片上传配合进度回调函数来精确显示上传进度。在每个分片上传时，通过 XMLHttpRequest 或 fetch 的上传事件（如 onprogress）获取已上传的字节数和总字节数，计算当前分片的上传进度，并结合已上传的分片数量计算整体上传进度。例如：
ini
const uploadChunk = async (chunk, index) => {
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
const chunkProgress = (e.loaded / e.total) * 100;
const overallProgress = ((index * chunk.size + e.loaded) / totalFileSize) * 100;
console.log(`Chunk ${index} progress: ${chunkProgress}%, Overall progress: ${overallProgress}%`);
};
xhr.open('POST', '/upload');
xhr.send(chunk);
};- 在断点续传场景下，由于可能存在部分分片已上传的情况，前端需要根据后端返回的已上传分片信息，正确初始化进度条，并在后续上传过程中准确更新进度显示。
（二）多线程上传
-
利用浏览器的多线程特性（如 Web Workers），同时上传多个分片，提高上传速度。通过创建多个 Web Worker 实例，每个实例负责上传一个分片，实现并发上传。
-
需要注意的是，多线程上传会增加网络请求的并发量，因此要根据网络带宽和服务器性能合理控制并发数，避免因并发过高导致网络拥塞或服务器负载过大。例如，可以使用一个队列来管理待上传的分片，通过信号量控制并发数，确保在网络和服务器可承受范围内进行高效上传。
（三）文件校验
-
上传完成后，前后端通过再次计算文件的哈希值（如 MD5、SHA256）来校验数据完整性。前端在上传结束后重新计算文件哈希值，并将其发送给后端，后端在合并文件后也计算一次哈希值，对比两者是否一致。若一致，则说明文件上传完整且未被篡改；若不一致，则可能在上传过程中出现数据丢失或错误，需要重新上传。
-
为了进一步保障数据安全，还可以在上传过程中对文件内容进行加密，如使用 AES 加密算法。前端在分片上传前对每个分片进行加密处理，后端在接收分片后进行解密，然后再进行合并操作，防止文件内容在传输过程中被窃取或篡改。
四、总结
大文件上传的核心是通过分片、断点续传、秒传等技术手段解决上传效率和稳定性问题，同时结合存储和分发优化提升用户体验。
最后欢迎大家点赞关注加收藏~