如何处理大文件上传（不失去理智）-js教程-PHP中文网

How to Handle Large File Uploads (Without Losing Your Mind)

为什么要优化大文件上传？

前端开发经常涉及文件上传（图像、视频、音频）。然而，大文件带来了挑战：上传时间长，影响用户体验；服务器压力过大和资源耗尽；由于网络不稳定导致上传失败，需要重试，浪费带宽；并增加浏览器内存消耗，影响整体性能和稳定性。优化大文件上传对于缓解这些问题至关重要。

现代应用程序需要高效处理越来越大的文件：社交平台上的高分辨率媒体、教育中的大型作业以及企业环境中的大量项目文件。传统方法在单个请求中发送整个文件是不够的。

传统上传存在以下问题：

上传速度慢：较大的文件大小会导致传输时间过长，让用户感到沮丧。
服务器负担过重：服务器难以同时处理大量数据，可能会耗尽资源（内存、CPU、带宽）。
网络漏洞：大型传输非常容易受到网络中断（断开、超时、数据包丢失）的影响，从而导致失败并强制完全重新上传。
浏览器内存使用率高：浏览器必须在内存中加载和管理整个文件，这可能会影响性能和稳定性。

因此，优化至关重要。

有效的优化策略

优化大文件上传的主要方法包括：

1.文件分块

将大文件分成更小的块，将每个文件作为单独的请求发送。这减少了每个请求的数据，加快了上传速度，降低了服务器负载，并实现了可续传上传。

<code class="language-javascript">function sliceFile(file, chunkSize) {
  const fileSize = file.size;
  const chunks = Math.ceil(fileSize / chunkSize);
  const slices = Array.from({ length: chunks }, (_, index) => {
    const start = index * chunkSize;
    const end = start + chunkSize;
    return file.slice(start, end);
  });
  return slices;
}</code>

登录后复制

2.并发上传

同时发送多个数据块，以最大限度地提高网络带宽和服务器利用率，从而增强用户体验。

<code class="language-javascript">async function uploadChunks(fileChunks) {
  const uploadPromises = fileChunks.map((chunk) =>
    fetch('/upload', { method: 'POST', body: chunk })
  );
  const responses = await Promise.all(uploadPromises);
  return responses;
}</code>

登录后复制

3.数据压缩

在传输前对每个块进行压缩，以进一步减小数据大小并提高传输效率。

<code class="language-javascript">async function compressChunk(chunk) {
  const compressedChunk = await new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      const result = pako.deflate(event.target.result);
      resolve(result);
    };
    reader.onerror = (event) => reject(event.error);
    reader.readAsArrayBuffer(chunk);
  });
  return compressedChunk;
}</code>

登录后复制

4.数据验证

在传输之前或之后验证每个块，以确保数据完整性，防止不必要或有缺陷的数据传输。

<code class="language-javascript">async function verifyChunk(chunk) {
  const hash = await calculateHash(chunk);
  const response = await fetch(`/verify?hash=${hash}`);
  const result = await response.json();
  return result;
}</code>

登录后复制

5.可断点上传

允许从中断点恢复上传，节省时间并提高上传速度。

<code class="language-javascript">async function resumeUpload(file, resumeByte) {
  const blob = file.slice(resumeByte);
  const formData = new FormData();
  formData.append('file', blob);
  const response = await fetch('/upload', { method: 'POST', body: formData });
  const result = await response.json();
  return result;
}</code>

登录后复制

6.即时上传验证

预上传哈希计算和服务器端比较，识别相同文件，避免重复上传。

<code class="language-javascript">function sliceFile(file, chunkSize) {
  const fileSize = file.size;
  const chunks = Math.ceil(fileSize / chunkSize);
  const slices = Array.from({ length: chunks }, (_, index) => {
    const start = index * chunkSize;
    const end = start + chunkSize;
    return file.slice(start, end);
  });
  return slices;
}</code>

登录后复制