大文件上传和下载问题

[!abstract]+ 问题预设网络断开之后，之前上传的部分没了？

传着传着，网络波动了，结果没有了。

关机后可不可以接着传，怎么做到？

术语

断点续传
断开重连重传
切片上传

切片上传

步骤

前端切片 chunk 5MB
将切片传递给后端，切片要去名：hash、index
后端组合切片

代码示例

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>大文件上传</title>
7
  </head>
8

9
  <body>
10
    <input type="file" id="file" multiple />
11
    <button id="upload">上传</button>
12
  </body>
13

14
  <script>
15
    const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
16

17
    function uploadFile() {
18
      const file = document.getElementById("file").files[0];
19
      console.log("上传文件", file.name);
20
      if (!file) {
21
        return;
22
      }
23

24
      const totalSize = file.size;
25
      const totalChunks = Math.ceil(totalSize / CHUNK_SIZE);
26
      let currentChunk = 0;
27
      const chunks = [];
28

29
      function uploadChunk() {
30
        console.log("上传第", currentChunk, "块");
31
        if (currentChunk >= totalChunks) {
32
          console.log("上传完成");
33
          return;
34
        }
35
        const start = currentChunk * CHUNK_SIZE;
36
        const end = Math.min(totalSize, start + CHUNK_SIZE);
37
        const chunk = file.slice(start, end);
38

39
        const formData = new FormData();
40
        formData.append("file", chunk);
41
        formData.append("index", currentChunk);
42
        formData.append("totalChunks", totalChunks);
43
        formData.append("filename", file.name);
44

45
        // fetch('/api/upload', {
46
        //   method: 'POST',
47
        //   body: formData
48
        // }).then(res => {
49
        //   if (res.ok) {
50
        //     currentChunk++;
51
        //     uploadChunk() // 递归上传下一块
52
        //   } else {
53
        //     throw new Error('上传失败')
54
        //   }
55
        // }).catch(err => {
56
        //   console.error(err)
57
        // });
58

59
        currentChunk++;
60
        uploadChunk(); // 递归上传下一块
61
      }
62

63
      // 开始上传
64
      uploadChunk();
65
    }
66

67
    document.getElementById("upload").addEventListener("click", uploadFile);
68
  </script>
69
</html>

优化

压缩文件

上传前对文件进行压缩，减少传输的数据量。

canvas或第三方库压缩图片、pako压缩其他文件类型。

并发上传

使用Promise.all并发上传多个分片。

注意控制并发数，避免请求过多。

1
function uploadFile(file) {
2
  const chunkSize = 5 * 1024 * 1024; // 5MB
3
  const chunks = Math.ceil(file.size / chunkSize);
4
  const concurrency = 3; // 并发数
5
  let currentChunk = 0;
6

7
  function uploadChunk(index) {
8
    const offset = index * chunkSize;
9
    const chunk = file.slice(offset, offset + chunkSize);
10
    const formData = new FormData();
11
    formData.append("file", chunk);
12
    formData.append("offset", offset);
13
    formData.append("totalSize", file.size);
14

15
    return fetch("/upload", {
16
      method: "POST",
17
      body: formData,
18
    });
19
  }
20

21
  function uploadNextChunk() {
22
    if (currentChunk >= chunks) {
23
      console.log("Upload complete");
24
      return;
25
    }
26

27
    const promises = [];
28
    for (let i = 0; i < concurrency && currentChunk < chunks; i++) {
29
      promises.push(uploadChunk(currentChunk));
30
      currentChunk++;
31
    }
32

33
    Promise.all(promises).then(() => {
34
      uploadNextChunk();
35
    });
36
  }
37

38
  uploadNextChunk();
39
}

显示上传进度

websocket实时通知上传情况，以及请求序列的控制。

通过XMLHttpRequest或fetch的 API 显示上传进度，提升用户体验。

1
function uploadFile(file) {
2
  const xhr = new XMLHttpRequest();
3
  xhr.open("POST", "/upload", true);
4

5
  xhr.upload.onprogress = (event) => {
6
    if (event.lengthComputable) {
7
      const percentComplete = (event.loaded / event.total) * 100;
8
      console.log(`Upload progress: ${percentComplete}%`);
9
    }
10
  };
11

12
  xhr.onload = () => {
13
    if (xhr.status === 200) {
14
      console.log("Upload complete");
15
    }
16
  };
17

18
  const formData = new FormData();
19
  formData.append("file", file);
20
  xhr.send(formData);
21
}

主进程卡顿？

尝试使用web-worker，实现多线程切片，处理完之后交给主进程发送

实现用户关闭浏览器后重新打开，继续上传

将 Blob 存储到IndexedDB，下次打开浏览器后嗅探一下是否存在未完成的切片，如果有就尝试继续上传。

记录已上传的分片信息。

上传前检查服务器上已上传的分片，跳过已上传部分。

下载

合并分片的文件

将大文件分成多个小块下载，减少单次请求的压力，并支持断点续传。

步骤

服务器将文件分片，前端通过多个请求下载分片。
使用 Range 请求头指定下载范围。
前端将分片合并为完整文件。

代码示例

1
async function downloadFile(url, fileName, chunkSize = 5 * 1024 * 1024) {
2
  let offset = 0;
3
  const chunks = [];
4

5
  while (true) {
6
    const end = offset + chunkSize - 1;
7
    const headers = { Range: `bytes=${offset}-${end}` };
8
    const response = await fetch(url, { headers });
9

10
    if (response.status === 206) {
11
      // 206 Partial Content
12
      const blob = await response.blob();
13
      chunks.push(blob);
14
      offset += chunkSize;
15
    } else if (response.status === 200) {
16
      // 如果服务器不支持分片下载，直接下载整个文件
17
      const blob = await response.blob();
18
      chunks.push(blob);
19
      break;
20
    } else {
21
      throw new Error("Failed to download file");
22
    }
23
  }
24

25
  // 合并分片
26
  const fullBlob = new Blob(chunks);
27
  const link = document.createElement("a");
28
  link.href = URL.createObjectURL(fullBlob);
29
  link.download = fileName;
30
  link.click();
31
  URL.revokeObjectURL(link.href);
32
}
33

34
// 使用
35
downloadFile("https://example.com/large-file.zip", "large-file.zip");

流式下载

使用流式 API（如 ReadableStream）逐步下载文件，避免内存占用过高。

实现步骤：

使用 fetch 获取响应流。
通过 ReadableStream 逐步读取数据并写入文件。

代码示例

1
async function streamDownload(url, fileName) {
2
  const response = await fetch(url);
3
  const reader = response.body.getReader();
4
  const chunks = [];
5

6
  while (true) {
7
    const { done, value } = await reader.read();
8
    if (done) break;
9
    chunks.push(value);
10
  }
11

12
  // 合并数据
13
  const fullBlob = new Blob(chunks);
14
  const link = document.createElement("a");
15
  link.href = URL.createObjectURL(fullBlob);
16
  link.download = fileName;
17
  link.click();
18
  URL.revokeObjectURL(link.href);
19
}
20

21
// 使用
22
streamDownload("https://example.com/large-file.zip", "large-file.zip");

断点续传（Resumable Download）

在网络中断后，从中断处继续下载，避免重新下载。

实现步骤：

记录已下载的字节范围。
使用 Range 请求头从断点处继续下载。

代码示例

1
async function resumeDownload(url, fileName, chunkSize = 5 * 1024 * 1024) {
2
  let offset = 0;
3
  const chunks = [];
4

5
  // 检查本地是否有部分下载的文件
6
  const savedBlob = localStorage.getItem(fileName);
7
  if (savedBlob) {
8
    const blob = new Blob([savedBlob]);
9
    offset = blob.size;
10
    chunks.push(blob);
11
  }
12

13
  while (true) {
14
    const end = offset + chunkSize - 1;
15
    const headers = { Range: `bytes=${offset}-${end}` };
16
    const response = await fetch(url, { headers });
17

18
    if (response.status === 206) {
19
      // 206 Partial Content
20
      const blob = await response.blob();
21
      chunks.push(blob);
22
      offset += chunkSize;
23

24
      // 保存已下载的部分到本地
25
      const fullBlob = new Blob(chunks);
26
      localStorage.setItem(fileName, await fullBlob.text());
27
    } else if (response.status === 200) {
28
      // 如果服务器不支持分片下载，直接下载整个文件
29
      const blob = await response.blob();
30
      chunks.push(blob);
31
      break;
32
    } else {
33
      throw new Error("Failed to download file");
34
    }
35
  }
36

37
  // 合并分片
38
  const fullBlob = new Blob(chunks);
39
  const link = document.createElement("a");
40
  link.href = URL.createObjectURL(fullBlob);
41
  link.download = fileName;
42
  link.click();
43
  URL.revokeObjectURL(link.href);
44
  localStorage.removeItem(fileName);
45
}
46

47
// 使用
48
resumeDownload("https://example.com/large-file.zip", "large-file.zip");

其他优化

Service Worker 缓存：通过 Service Worker 缓存大文件，提升后续加载速度。。
显示下载进度：提升用户体验。