django+vue3实现前后端大文件分片下载

效果：

大文件分片下载支持的功能：

• 展示目标文件信息
  
• 进步下载速率：通过并发哀求多个块，可以更有效地利用网络带宽
  
• 断点续传：支持停息后从已下载部分继承，无需重新开始
  
• 错误规复：单个块下载失败只需重试该块，而不是整个文件
  
• 更好的用户体验：及时表现下载进度、速率和预计剩余时间
  
• 内存服从：通太过块下载和处理处罚，淘汰了一次性内存占用
  

大文件分片下载

前端处理处罚流程：
   后端处理处罚流程：
   django代码

1，代码

1. # settings.py
2. # 指定文件访问的 URL 前缀
3. MEDIA_URL = '/media/'
4. MEDIA_ROOT = BASE_DIR / 'media/'
6. # views.py
7. import os
8. import mimetypes
9. from django.conf import settings
10. from django.http import StreamingHttpResponse, JsonResponse, HttpResponse
11. from django.utils.http import http_date
12. from django.views.decorators.http import require_http_methods
14. def get_file_info(file_path):
15.     """
16.     获取文件信息：
17.     - name: 文件名
18.     - size: 文件大小，单位字节
19.     - type: 文件类型
20.     """
21.     if not os.path.exists(file_path):
22.         return None
24.     file_size = os.path.getsize(file_path)
25.     file_name = os.path.basename(file_path)
26.     content_type, encoding = mimetypes.guess_type(file_path)
28.     return {
29.         'name': file_name,
30.         'size': file_size,
31.         'type': content_type or 'application/octet-stream'
32.     }
34. @require_http_methods(["GET"])
35. def file_info(request):
36.     """获取文件信息API"""
37.     file_path = os.path.join(settings.MEDIA_ROOT, "user_info_big.csv")
38.     info = get_file_info(file_path)
40.     if info is None:
41.         return JsonResponse({"error": "File not found"}, status=404)
43.     return JsonResponse(info)
45. @require_http_methods(["GET"])
46. def download_large_file(request):
47.     """
48.     分片下载文件的API
49.     :param request: 请求对象
50.     :return: 文件流
51.     """
52.     file_path = os.path.join(settings.MEDIA_ROOT, "user_info_big.csv")
54.     # 1，检查文件是否存在
55.     if not os.path.exists(file_path):
56.         return HttpResponse("File not found", status=404)
58.     # 2，获取文件信息
59.     file_size = os.path.getsize(file_path)
60.     file_name = os.path.basename(file_path)
61.     content_type, encoding = mimetypes.guess_type(file_path)
62.     content_type = content_type or 'application/octet-stream'
64.     # 3，获取请求中的Range头
65.     range_header = request.META.get('HTTP_RANGE', '').strip()
66.     # 格式：bytes=0-100
67.     range_match = range_header.replace('bytes=', '').split('-')
68.     # 起始位置
69.     range_start = int(range_match[0]) if range_match[0] else 0
70.     # 结束位置
71.     range_end = int(range_match[1]) if range_match[1] else file_size - 1
73.     # 4，确保范围合法
74.     range_start = max(0, range_start)
75.     range_end = min(file_size - 1, range_end)
77.     # 5，计算实际要发送的数据大小
78.     content_length = range_end - range_start + 1
80.     # 6，创建响应：使用StreamingHttpResponse，将文件流式传输。206表示部分内容，200表示全部内容
81.     response = StreamingHttpResponse(
82.         file_iterator(file_path, range_start, range_end, chunk_size=8192),
83.         status=206 if range_header else 200,
84.         content_type=content_type
85.     )
87.     # 7，设置响应头
88.     response['Content-Length'] = content_length
89.     response['Accept-Ranges'] = 'bytes'
90.     response['Content-Disposition'] = f'attachment; filename="{file_name}"'
92.     if range_header:
93.         response['Content-Range'] = f'bytes {range_start}-{range_end}/{file_size}'
95.     response['Last-Modified'] = http_date(os.path.getmtime(file_path))
97.     # 模拟处理延迟，方便测试暂停/继续功能
98.     # time.sleep(0.1)  # 取消注释以添加人为延迟
100.     # 8，返回响应
101.     return response
103. def file_iterator(file_path, start_byte=0, end_byte=None, chunk_size=8192):
104.     """
105.     文件读取迭代器
106.     :param file_path: 文件路径
107.     :param start_byte: 起始字节
108.     :param end_byte: 结束字节
109.     :param chunk_size: 块大小
110.     """
111.     with open(file_path, 'rb') as f:
112.         # 移动到起始位置
113.         f.seek(start_byte)
115.         # 计算剩余字节数
116.         remaining = end_byte - start_byte + 1 if end_byte else None
118.         while True:
119.             if remaining is not None:
120.                 # 如果指定了结束位置，则读取剩余字节或块大小，取小的那个
121.                 bytes_to_read = min(chunk_size, remaining)
122.                 if bytes_to_read <= 0:
123.                     break
124.             else:
125.                 # 否则读取指定块大小
126.                 bytes_to_read = chunk_size
128.             data = f.read(bytes_to_read)
130.             if not data:
131.                 break
133.             yield data
135.             if remaining is not None:
136.                 remaining -= len(data)
138. # proj urls.py
139. from django.urls import path, include
141. urlpatterns = [
142.     # 下载文件
143.     path('download/', include(('download.urls', 'download'), namespace='download')),
144. ]
146. # download.urls.py
147. from django.urls import path
149. from download import views
151. urlpatterns = [
152.     path('large_file/file_info/', views.file_info, name='file_info'),
153.     path('large_file/download_large_file/', views.download_large_file, name='download_large_file'),
154. ]

复制代码

2，焦点功能分析

（1）file_info 端点 - 获取文件元数据

这个端点提供文件的根本信息，让前端可以大概规划下载计谋：

• 功能：返回文件名称、巨细和MIME范例
  
• 用途：前端根据文件巨细和设置的块巨细盘算出必要下载的分块数目
  

（2）download_large_file 端点 - 实现分片下载

这是实现分片下载的焦点API，通过HTTP Range哀求实现：
1，分析Range头：从HTTP_RANGE头部分析客户端哀求的字节范围

1. range_header = request.META.get('HTTP_RANGE', '').strip()
2. range_match = range_header.replace('bytes=', '').split('-')
3. range_start = int(range_match[0]) if range_match[0] else 0
4. range_end = int(range_match[1]) if range_match[1] else file_size - 1

复制代码

2，流式传输：利用StreamingHttpResponse和迭代器按块读取和传输文件，克制一次加载整个文件到内存

1. response = StreamingHttpResponse(
2.     file_iterator(file_path, range_start, range_end, chunk_size=8192),
3.     status=206 if range_header else 200,
4.     content_type=content_type
5. )

复制代码

3，返反相应头：设置须要的相应头，包罗Content-Range指示返回内容的范围

1. response['Content-Range'] = f'bytes {range_start}-{range_end}/{file_size}'

复制代码

（3）file_iterator 函数 - 高效的文件读取

这个函数创建一个迭代器，高效地读取文件的指定部分：
1，文件定位：将文件指针移动到哀求的起始位置

1. f.seek(start_byte)

复制代码

2，分块读取：按指定的块巨细读取文件，克制一次性读取大量数据

1. data = f.read(bytes_to_read)

复制代码

3，界限控制：确保只读取哀求范围内的数据

1. remaining -= len(data)

复制代码

HTTP状态码和相应头的作用

1，206 Partial Content：

• 体现服务器乐成处理处罚了部分GET哀求
  
• 分片下载的标准HTTP状态码
  

2，Content-Range: bytes start-end/total：

• 指示相应中包罗的字节范围和文件总巨细
  
• 资助客户端确认吸取的是哪部分数据
  

3，Accept-Ranges: bytes：

• 表明服务器支持范围哀求
  
• 让客户端知道可以利用Range头哀求部分内容
  

4，Content-Length：

• 体现当前相应内容的长度
  
• 不是文件总长度，而是本次返回的片断长度
  

vue3代码

1，代码

1，前端界面 (Vue组件):

• 提供设置选项：并发块数、块巨细
  
• 表现下载进度：进度条、已下载量、下载速率、剩余时间提供操纵按钮：开始、停息、继承、取消
  
• 可视化表现每个分块的下载状态
  

1. <template>
2.   <div class="enhanced-downloader">
3.     <div class="card">
4.       <h2>大文件分块下载</h2>
6.       <div class="file-info" v-if="fileInfo">
7.         <p><strong>文件名:</strong> {{ fileInfo.name }}</p>
8.         <p><strong>文件大小:</strong> {{ formatFileSize(fileInfo.size) }}</p>
9.         <p><strong>类型:</strong> {{ fileInfo.type }}</p>
10.       </div>
12.       <div class="config-panel" v-if="!isDownloading && !isPaused">
13.         <div class="config-item">
14.           <label>并发块数:</label>
15.           <select v-model="concurrency">
16.             <option :value="1">1</option>
17.             <option :value="2">2</option>
18.             <option :value="3">3</option>
19.             <option :value="5">5</option>
20.             <option :value="8">8</option>
21.           </select>
22.         </div>
24.         <div class="config-item">
25.           <label>块大小:</label>
26.           <select v-model="chunkSize">
27.             <option :value="512 * 1024">512 KB</option>
28.             <option :value="1024 * 1024">1 MB</option>
29.             <option :value="2 * 1024 * 1024">2 MB</option>
30.             <option :value="5 * 1024 * 1024">5 MB</option>
31.           </select>
32.         </div>
33.       </div>
35.       <div class="progress-container" v-if="isDownloading || isPaused">
36.         <div class="progress-bar">
37.           <div class="progress" :style="{ width: `${progress}%` }"></div>
38.         </div>
40.         <div class="progress-stats">
41.           <div class="stat-item">
42.             <span class="label">进度:</span>
43.             <span class="value">{{ progress.toFixed(2) }}%</span>
44.           </div>
46.           <div class="stat-item">
47.             <span class="label">已下载:</span>
48.             <span class="value">{{ formatFileSize(downloadedBytes) }} / {{ formatFileSize(totalBytes) }}</span>
49.           </div>
51.           <div class="stat-item">
52.             <span class="label">速度:</span>
53.             <span class="value">{{ downloadSpeed }}</span>
54.           </div>
56.           <div class="stat-item">
57.             <span class="label">已完成块:</span>
58.             <span class="value">{{ downloadedChunks }} / {{ totalChunks }}</span>
59.           </div>
61.           <div class="stat-item">
62.             <span class="label">剩余时间:</span>
63.             <span class="value">{{ remainingTime }}</span>
64.           </div>
65.         </div>
66.       </div>
68.       <div class="chunk-visualization" v-if="isDownloading || isPaused">
69.         <div class="chunk-grid">
70.           <div
71.               v-for="(chunk, index) in chunkStatus"
72.               :key="index"
73.               class="chunk-block"
74.               :class="{
75.               'downloaded': chunk === 'completed',
76.               'downloading': chunk === 'downloading',
77.               'pending': chunk === 'pending',
78.               'error': chunk === 'error'
79.             }"
80.               :title="`块 ${index + 1}: ${chunk}`"
81.           ></div>
82.         </div>
83.       </div>
85.       <div class="actions">
86.         <button
87.             @click="startDownload"
88.             :disabled="isDownloading"
89.             v-if="!isDownloading && !isPaused"
90.             class="btn btn-primary">
91.           开始下载
92.         </button>
94.         <button
95.             @click="pauseDownload"
96.             :disabled="!isDownloading"
97.             v-if="isDownloading && !isPaused"
98.             class="btn btn-warning">
99.           暂停
100.         </button>
102.         <button
103.             @click="resumeDownload"
104.             :disabled="!isPaused"
105.             v-if="isPaused"
106.             class="btn btn-success">
107.           继续
108.         </button>
110.         <button
111.             @click="cancelDownload"
112.             :disabled="!isDownloading && !isPaused"
113.             class="btn btn-danger">
114.           取消
115.         </button>
116.       </div>
118.       <div class="status-message" v-if="statusMessage">
119.         {{ statusMessage }}
120.       </div>
121.     </div>
122.   </div>
123. </template>
125. <script setup>
126. import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
127. import {ChunkDownloader} from './downloadService';
129. // API URL
130. const API_BASE_URL = 'http://localhost:8000/download/';
132. // 下载配置
133. const concurrency = ref(3);
134. const chunkSize = ref(1024 * 1024); // 1MB
135. const downloader = ref(null);
137. // 状态变量
138. const fileInfo = ref(null);
139. const isDownloading = ref(false);
140. const isPaused = ref(false);
141. const downloadedBytes = ref(0);
142. const totalBytes = ref(0);
143. const downloadedChunks = ref(0);
144. const totalChunks = ref(0);
145. const statusMessage = ref('准备就绪');
146. const downloadStartTime = ref(0);
147. const lastUpdateTime = ref(0);
148. const lastBytes = ref(0);
149. const downloadSpeed = ref('0 KB/s');
150. const remainingTime = ref('计算中...');
151. const speedInterval = ref(null);
153. // 块状态
154. const chunkStatus = ref([]);
156. // 计算下载进度百分比
157. const progress = computed(() => {
158.   if (totalBytes.value === 0) return 0;
159.   return (downloadedBytes.value / totalBytes.value) * 100;
160. });
162. // 初始化
163. onMounted(async () => {
164.   try {
165.     await fetchFileInfo();
166.   } catch (error) {
167.     console.error('获取文件信息失败:', error);
168.     statusMessage.value = `获取文件信息失败: ${error.message}`;
169.   }
170. });
172. // 清理资源
173. onUnmounted(() => {
174.   if (downloader.value) {
175.     downloader.value.cancel();
176.   }
177.   clearInterval(speedInterval.value);
178. });
180. // 获取文件信息
181. async function fetchFileInfo() {
182.   const response = await fetch(`${API_BASE_URL}large_file/file_info/`);
183.   if (!response.ok) {
184.     throw new Error(`HTTP 错误! 状态码: ${response.status}`);
185.   }
187.   fileInfo.value = await response.json();
188.   totalBytes.value = fileInfo.value.size;
190.   // 根据文件大小初始化分块状态
191.   const initialTotalChunks = Math.ceil(fileInfo.value.size / chunkSize.value);
192.   chunkStatus.value = Array(initialTotalChunks).fill('pending');
193.   totalChunks.value = initialTotalChunks;
194. }
196. // 开始下载
197. async function startDownload() {
198.   if (isDownloading.value) return;
200.   try {
201.     // 初始化下载器
202.     downloader.value = new ChunkDownloader(`${API_BASE_URL}`, {
203.       chunkSize: chunkSize.value,
204.       concurrency: concurrency.value,
205.       maxRetries: 3,
206.       onProgress: handleProgress,
207.       onComplete: handleComplete,
208.       onError: handleError,
209.       onStatusChange: handleStatusChange
210.     });
212.     // 初始化状态
213.     downloadedBytes.value = 0;
214.     downloadedChunks.value = 0;
215.     isDownloading.value = true;
216.     isPaused.value = false;
217.     statusMessage.value = '准备下载...';
219.     // 获取文件信息
220.     await downloader.value.fetchFileInfo();
222.     // 更新总块数
223.     totalChunks.value = Math.ceil(downloader.value.fileSize / chunkSize.value);
224.     chunkStatus.value = Array(totalChunks.value).fill('pending');
226.     // 开始下载
227.     downloadStartTime.value = Date.now();
228.     lastUpdateTime.value = Date.now();
229.     lastBytes.value = 0;
230.     startSpeedCalculator();
232.     await downloader.value.start();
233.   } catch (error) {
234.     console.error('下载启动失败:', error);
235.     statusMessage.value = `下载启动失败: ${error.message}`;
236.     isDownloading.value = false;
237.   }
238. }
240. // 暂停下载
241. function pauseDownload() {
242.   if (!isDownloading.value || !downloader.value) return;
244.   downloader.value.pause();
245.   isDownloading.value = false;
246.   isPaused.value = true;
247.   statusMessage.value = '下载已暂停';
248.   clearInterval(speedInterval.value);
249. }
251. // 继续下载
252. function resumeDownload() {
253.   if (!isPaused.value || !downloader.value) return;
255.   downloader.value.resume();
256.   isDownloading.value = true;
257.   isPaused.value = false;
258.   statusMessage.value = '继续下载...';
260.   // 重新开始速度计算
261.   lastUpdateTime.value = Date.now();
262.   lastBytes.value = downloadedBytes.value;
263.   startSpeedCalculator();
264. }
266. // 取消下载
267. function cancelDownload() {
268.   if (!downloader.value) return;
270.   downloader.value.cancel();
271.   isDownloading.value = false;
272.   isPaused.value = false;
273.   downloadedBytes.value = 0;
274.   downloadedChunks.value = 0;
275.   statusMessage.value = '下载已取消';
276.   clearInterval(speedInterval.value);
278.   // 重置块状态
279.   chunkStatus.value = Array(totalChunks.value).fill('pending');
280. }
282. // 处理进度更新
283. function handleProgress(data) {
284.   downloadedBytes.value = data.downloadedBytes;
285.   downloadedChunks.value = data.downloadedChunks;
287.   // 更新块状态（这里仅是简化的更新方式，实际上应该由downloader提供精确的块状态）
288.   const newChunkStatus = [...chunkStatus.value];
289.   const completedChunksCount = Math.floor(downloadedChunks.value);
291.   for (let i = 0; i < newChunkStatus.length; i++) {
292.     if (i < completedChunksCount) {
293.       newChunkStatus[i] = 'completed';
294.     } else if (i < completedChunksCount + concurrency.value && newChunkStatus[i] !== 'completed') {
295.       newChunkStatus[i] = 'downloading';
296.     }
297.   }
299.   chunkStatus.value = newChunkStatus;
300. }
302. // 处理下载完成
303. function handleComplete(data) {
304.   isDownloading.value = false;
305.   isPaused.value = false;
306.   statusMessage.value = '下载完成';
307.   clearInterval(speedInterval.value);
309.   // 标记所有块为已完成
310.   chunkStatus.value = Array(totalChunks.value).fill('completed');
311. }
313. // 处理错误
314. function handleError(error) {
315.   console.error('下载错误:', error);
316.   statusMessage.value = `下载错误: ${error.message}`;
317. }
319. // 处理状态变化
320. function handleStatusChange(status, error) {
321.   switch (status) {
322.     case 'downloading':
323.       isDownloading.value = true;
324.       isPaused.value = false;
325.       statusMessage.value = '下载中...';
326.       break;
327.     case 'paused':
328.       isDownloading.value = false;
329.       isPaused.value = true;
330.       statusMessage.value = '下载已暂停';
331.       break;
332.     case 'completed':
333.       isDownloading.value = false;
334.       isPaused.value = false;
335.       statusMessage.value = '下载完成';
336.       break;
337.     case 'error':
338.       isDownloading.value = false;
339.       statusMessage.value = `下载错误: ${error?.message || '未知错误'}`;
340.       break;
341.   }
342. }
344. // 启动下载速度计算器
345. function startSpeedCalculator() {
346.   clearInterval(speedInterval.value);
347.   speedInterval.value = setInterval(() => {
348.     const now = Date.now();
349.     const timeElapsed = (now - lastUpdateTime.value) / 1000; // 转换为秒
350.     const bytesDownloaded = downloadedBytes.value - lastBytes.value;
352.     if (timeElapsed > 0) {
353.       const speed = bytesDownloaded / timeElapsed; // 字节/秒
354.       downloadSpeed.value = formatFileSize(speed) + '/s';
356.       // 计算剩余时间
357.       if (speed > 0) {
358.         const bytesRemaining = totalBytes.value - downloadedBytes.value;
359.         const secondsRemaining = bytesRemaining / speed;
360.         remainingTime.value = formatTime(secondsRemaining);
361.       } else {
362.         remainingTime.value = '计算中...';
363.       }
365.       lastUpdateTime.value = now;
366.       lastBytes.value = downloadedBytes.value;
367.     }
368.   }, 1000);
369. }
371. // 格式化文件大小
372. function formatFileSize(bytes) {
373.   if (bytes === 0) return '0 B';
375.   const k = 1024;
376.   const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
377.   const i = Math.floor(Math.log(bytes) / Math.log(k));
379.   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
380. }
382. // 格式化时间
383. function formatTime(seconds) {
384.   if (!isFinite(seconds) || seconds < 0) {
385.     return '计算中...';
386.   }
388.   if (seconds < 60) {
389.     return `${Math.ceil(seconds)}秒`;
390.   } else if (seconds < 3600) {
391.     const minutes = Math.floor(seconds / 60);
392.     const secs = Math.ceil(seconds % 60);
393.     return `${minutes}分${secs}秒`;
394.   } else {
395.     const hours = Math.floor(seconds / 3600);
396.     const minutes = Math.floor((seconds % 3600) / 60);
397.     return `${hours}小时${minutes}分钟`;
398.   }
399. }
401. // 监听配置改变，更新块状态
402. watch([chunkSize], () => {
403.   if (fileInfo.value && fileInfo.value.size) {
404.     totalChunks.value = Math.ceil(fileInfo.value.size / chunkSize.value);
405.     chunkStatus.value = Array(totalChunks.value).fill('pending');
406.   }
407. });
408. </script>
410. <style scoped>
411. .enhanced-downloader {
412.   max-width: 800px;
413.   margin: 0 auto;
414.   padding: 20px;
415. }
417. .card {
418.   background: #fff;
419.   border-radius: 8px;
420.   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
421.   padding: 20px;
422. }
424. h2 {
425.   margin-top: 0;
426.   color: #333;
427. }
429. .file-info {
430.   margin-bottom: 20px;
431. }
433. .progress-container {
434.   margin-bottom: 20px;
435. }
437. .progress-bar {
438.   height: 20px;
439.   background-color: #f0f0f0;
440.   border-radius: 10px;
441.   overflow: hidden;
442.   margin-bottom: 10px;
443. }
445. .progress {
446.   height: 100%;
447.   background-color: #4CAF50;
448.   transition: width 0.3s ease;
449. }
451. .progress-stats {
452.   display: flex;
453.   justify-content: space-between;
454.   font-size: 14px;
455.   color: #666;
456. }
458. .actions {
459.   display: flex;
460.   gap: 10px;
461.   margin-bottom: 20px;
462. }
464. .btn {
465.   padding: 8px 16px;
466.   border: none;
467.   border-radius: 4px;
468.   cursor: pointer;
469.   font-weight: bold;
470.   transition: background-color 0.3s;
471. }
473. .btn:disabled {
474.   opacity: 0.5;
475.   cursor: not-allowed;
476. }
478. .btn-primary {
479.   background-color: #4CAF50;
480.   color: white;
481. }
483. .btn-warning {
484.   background-color: #FF9800;
485.   color: white;
486. }
488. .btn-success {
489.   background-color: #2196F3;
490.   color: white;
491. }
493. .btn-danger {
494.   background-color: #F44336;
495.   color: white;
496. }
498. .status {
499.   font-style: italic;
500.   color: #666;
501. }
502. </style>

复制代码

2，下载服务 (ChunkDownloader类):

• 负责管理整个下载过程
  
• 处理处罚文件信息获取、分块下载、进度追踪
  
• 实现并发控制、重试机制、停息/继承功能
  

1. // downloadService.js - 分块下载实现
3. /*
4. 文件分块下载器
5. */
6. export class ChunkDownloader {
7.     constructor(url, options = {}) {
8.         this.url = url;
9.         this.chunkSize = options.chunkSize || 1024 * 1024; // 默认1MB每块
10.         this.maxRetries = options.maxRetries || 3;
11.         this.concurrency = options.concurrency || 3; // 并发下载块数
12.         this.timeout = options.timeout || 30000; // 超时时间
14.         this.fileSize = 0;
15.         this.fileName = '';
16.         this.contentType = '';
17.         this.chunks = [];
18.         this.downloadedChunks = 0;
19.         this.activeDownloads = 0;
20.         this.totalChunks = 0;
21.         this.downloadedBytes = 0;
22.         this.status = 'idle'; // idle, downloading, paused, completed, error
23.         this.error = null;
25.         this.onProgress = options.onProgress || (() => {
26.         });
27.         this.onComplete = options.onComplete || (() => {
28.         });
29.         this.onError = options.onError || (() => {
30.         });
31.         this.onStatusChange = options.onStatusChange || (() => {
32.         });
34.         this.abortControllers = new Map();
35.         this.pendingChunks = [];
36.         this.processedChunks = new Set();
37.     }
39.     // 获取文件信息
40.     async fetchFileInfo() {
41.         try {
42.             const response = await fetch(this.url + 'large_file/file_info/');
43.             if (!response.ok) {
44.                 throw new Error(`无法获取文件信息: ${response.status}`);
45.             }
47.             const info = await response.json();
48.             this.fileSize = info.size;
49.             this.fileName = info.name;
50.             this.contentType = info.type;
52.             // 计算分块数量
53.             this.totalChunks = Math.ceil(this.fileSize / this.chunkSize);
55.             return info;
56.         } catch (error) {
57.             this.error = error;
58.             this.status = 'error';
59.             this.onStatusChange(this.status, error);
60.             this.onError(error);
61.             throw error;
62.         }
63.     }
65.     // 开始下载
66.     async start() {
67.         if (this.status === 'downloading') {
68.             return;
69.         }
71.         try {
72.             // 如果还没获取文件信息，先获取
73.             if (this.fileSize === 0) {
74.                 await this.fetchFileInfo();
75.             }
77.             // 初始化状态
78.             this.status = 'downloading';
79.             this.onStatusChange(this.status);
81.             // 如果是全新下载，初始化块数组
82.             if (this.chunks.length === 0) {
83.                 this.chunks = new Array(this.totalChunks).fill(null);
84.                 this.pendingChunks = Array.from({length: this.totalChunks}, (_, i) => i);
85.             }
87.             // 开始并发下载
88.             this.startConcurrentDownloads();
90.         } catch (error) {
91.             this.error = error;
92.             this.status = 'error';
93.             this.onStatusChange(this.status, error);
94.             this.onError(error);
95.         }
96.     }
98.     // 开始并发下载
99.     startConcurrentDownloads() {
100.         // 确保同时只有指定数量的并发下载
101.         while (this.activeDownloads < this.concurrency && this.pendingChunks.length > 0) {
102.             const chunkIndex = this.pendingChunks.shift();
103.             this.downloadChunk(chunkIndex);
104.         }
105.     }
107.     // 下载指定的块
108.     async downloadChunk(chunkIndex, retryCount = 0) {
109.         if (this.status !== 'downloading' || this.processedChunks.has(chunkIndex)) {
110.             return;
111.         }
113.         this.activeDownloads++;
114.         const startByte = chunkIndex * this.chunkSize;
115.         const endByte = Math.min(startByte + this.chunkSize - 1, this.fileSize - 1);
117.         // 创建用于取消请求的控制器
118.         const controller = new AbortController();
119.         this.abortControllers.set(chunkIndex, controller);
121.         try {
122.             const response = await fetch(
123.                 this.url + 'large_file/download_large_file/',
124.                 {
125.                     method: 'GET',
126.                     headers: {
127.                         'Range': `bytes=${startByte}-${endByte}`
128.                     },
129.                     signal: controller.signal,
130.                     timeout: this.timeout
131.                 });
133.             if (!response.ok && response.status !== 206) {
134.                 throw new Error(`服务器错误: ${response.status}`);
135.             }
137.             // 获取块数据
138.             const blob = await response.blob();
139.             this.chunks[chunkIndex] = blob;
140.             this.downloadedChunks++;
141.             this.downloadedBytes += blob.size;
142.             this.processedChunks.add(chunkIndex);
144.             // 更新进度
145.             this.onProgress({
146.                 downloadedChunks: this.downloadedChunks,
147.                 totalChunks: this.totalChunks,
148.                 downloadedBytes: this.downloadedBytes,
149.                 totalBytes: this.fileSize,
150.                 progress: (this.downloadedBytes / this.fileSize) * 100
151.             });
153.             // 清理控制器
154.             this.abortControllers.delete(chunkIndex);
156.             // 检查是否下载完成
157.             if (this.downloadedChunks === this.totalChunks) {
158.                 this.completeDownload();
159.             } else if (this.status === 'downloading') {
160.                 // 继续下载下一个块
161.                 this.activeDownloads--;
162.                 this.startConcurrentDownloads();
163.             }
165.         } catch (error) {
166.             this.abortControllers.delete(chunkIndex);
168.             if (error.name === 'AbortError') {
169.                 // 用户取消，不进行重试
170.                 this.activeDownloads--;
171.                 return;
172.             }
174.             // 重试逻辑
175.             if (retryCount < this.maxRetries) {
176.                 console.warn(`块 ${chunkIndex} 下载失败，重试 ${retryCount + 1}/${this.maxRetries}`);
177.                 this.activeDownloads--;
178.                 this.downloadChunk(chunkIndex, retryCount + 1);
179.             } else {
180.                 console.error(`块 ${chunkIndex} 下载失败，已达到最大重试次数`);
181.                 this.error = error;
182.                 this.status = 'error';
183.                 this.onStatusChange(this.status, error);
184.                 this.onError(error);
185.                 this.activeDownloads--;
186.             }
187.         }
188.     }
190.     // 完成下载
191.     completeDownload() {
192.         if (this.status === 'completed') {
193.             return;
194.         }
196.         try {
197.             // 合并所有块
198.             const blob = new Blob(this.chunks, {type: this.contentType});
200.             // 创建下载链接
201.             const url = URL.createObjectURL(blob);
202.             const a = document.createElement('a');
203.             a.href = url;
204.             a.download = this.fileName;
205.             document.body.appendChild(a);
206.             a.click();
207.             document.body.removeChild(a);
209.             // 清理资源
210.             setTimeout(() => URL.revokeObjectURL(url), 100);
212.             // 更新状态
213.             this.status = 'completed';
214.             this.onStatusChange(this.status);
215.             this.onComplete({
216.                 fileName: this.fileName,
217.                 fileSize: this.fileSize,
218.                 contentType: this.contentType,
219.                 blob: blob
220.             });
222.         } catch (error) {
223.             this.error = error;
224.             this.status = 'error';
225.             this.onStatusChange(this.status, error);
226.             this.onError(error);
227.         }
228.     }
230.     // 暂停下载
231.     pause() {
232.         if (this.status !== 'downloading') {
233.             return;
234.         }
236.         // 取消所有正在进行的请求
237.         this.abortControllers.forEach(controller => {
238.             controller.abort();
239.         });
241.         // 清空控制器集合
242.         this.abortControllers.clear();
244.         // 更新状态
245.         this.status = 'paused';
246.         this.activeDownloads = 0;
247.         this.onStatusChange(this.status);
249.         // 将当前处理中的块重新加入待处理队列
250.         this.pendingChunks = Array.from({length: this.totalChunks}, (_, i) => i)
251.             .filter(i => !this.processedChunks.has(i));
252.     }
254.     // 继续下载
255.     resume() {
256.         if (this.status !== 'paused') {
257.             return;
258.         }
260.         this.status = 'downloading';
261.         this.onStatusChange(this.status);
262.         this.startConcurrentDownloads();
263.     }
265.     // 取消下载
266.     cancel() {
267.         // 取消所有正在进行的请求
268.         this.abortControllers.forEach(controller => {
269.             controller.abort();
270.         });
272.         // 重置所有状态
273.         this.chunks = [];
274.         this.downloadedChunks = 0;
275.         this.activeDownloads = 0;
276.         this.downloadedBytes = 0;
277.         this.status = 'idle';
278.         this.error = null;
279.         this.abortControllers.clear();
280.         this.pendingChunks = [];
281.         this.processedChunks.clear();
283.         this.onStatusChange(this.status);
284.     }
286.     // 获取当前状态
287.     getStatus() {
288.         return {
289.             status: this.status,
290.             downloadedChunks: this.downloadedChunks,
291.             totalChunks: this.totalChunks,
292.             downloadedBytes: this.downloadedBytes,
293.             totalBytes: this.fileSize,
294.             progress: this.fileSize ? (this.downloadedBytes / this.fileSize) * 100 : 0,
295.             fileName: this.fileName,
296.             error: this.error
297.         };
298.     }
299. }

复制代码

2，焦点技能原理

（1）HTTP Range哀求

该实现通过HTTP的Range头部实现分块下载：

1. const response = await fetch(
2.     this.url + 'large_file/download_large_file/',
3.     {
4.         method: 'GET',
5.         headers: {
6.             'Range': `bytes=${startByte}-${endByte}`
7.         },
8.         signal: controller.signal,
9.         timeout: this.timeout
10.     });

复制代码

• 服务器会返回状态码206（Partial Content）和哀求的文件片断。
  

（2）并发控制

代码通过控制同时活泼的下载哀求数目来实现并发：

1. while (this.activeDownloads < this.concurrency && this.pendingChunks.length > 0) {
2.     const chunkIndex = this.pendingChunks.shift();
3.     this.downloadChunk(chunkIndex);
4. }

复制代码

（3）状态管理和进度追踪

• 跟踪每个块的下载状态（待下载、下载中、已完成、错误）
  
• 盘算并陈诉总体进度、下载速率和剩余时间
  

（4）错误处理处罚和重试机制

对下载失败的块举行自动重试：

1. if (retryCount < this.maxRetries) {
2.     console.warn(`块 ${chunkIndex} 下载失败，重试 ${retryCount + 1}/${this.maxRetries}`);
3.     this.activeDownloads--;
4.     this.downloadChunk(chunkIndex, retryCount + 1);
5. }

复制代码

（5）停息/规复功能

通过AbortController取消活泼的哀求，并生存未完成的块索引：

1. pause() {
2.     // 取消所有正在进行的请求
3.     this.abortControllers.forEach(controller => {
4.         controller.abort();
5.     });
6.    
7.     // 将当前处理中的块重新加入待处理队列
8.     this.pendingChunks = Array.from({length: this.totalChunks}, (_, i) => i)
9.         .filter(i => !this.processedChunks.has(i));
10. }

复制代码

（6）文件归并和下载

全部块下载完成后，利用Blob API归并全部分块并创建下载链接：

1. const blob = new Blob(this.chunks, {type: this.contentType});
2. const url = URL.createObjectURL(blob);
3. const a = document.createElement('a');
4. a.href = url;
5. a.download = this.fileName;
6. a.click();

复制代码