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

效果：
在这里插入图片描述

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

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

大文件分片下载

前端处理流程：

后端处理流程：

django代码

1，代码

# settings.py
# 指定文件访问的 URL 前缀
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media/'# views.py
import os
import mimetypes
from django.conf import settings
from django.http import StreamingHttpResponse, JsonResponse, HttpResponse
from django.utils.http import http_date
from django.views.decorators.http import require_http_methodsdef get_file_info(file_path):"""获取文件信息：- name: 文件名- size: 文件大小，单位字节- type: 文件类型"""if not os.path.exists(file_path):return Nonefile_size = os.path.getsize(file_path)file_name = os.path.basename(file_path)content_type, encoding = mimetypes.guess_type(file_path)return {'name': file_name,'size': file_size,'type': content_type or 'application/octet-stream'}@require_http_methods(["GET"])
def file_info(request):"""获取文件信息API"""file_path = os.path.join(settings.MEDIA_ROOT, "user_info_big.csv")info = get_file_info(file_path)if info is None:return JsonResponse({"error": "File not found"}, status=404)return JsonResponse(info)@require_http_methods(["GET"])
def download_large_file(request):"""分片下载文件的API:param request: 请求对象:return: 文件流"""file_path = os.path.join(settings.MEDIA_ROOT, "user_info_big.csv")# 1，检查文件是否存在if not os.path.exists(file_path):return HttpResponse("File not found", status=404)# 2，获取文件信息file_size = os.path.getsize(file_path)file_name = os.path.basename(file_path)content_type, encoding = mimetypes.guess_type(file_path)content_type = content_type or 'application/octet-stream'# 3，获取请求中的Range头range_header = request.META.get('HTTP_RANGE', '').strip()# 格式：bytes=0-100range_match = range_header.replace('bytes=', '').split('-')# 起始位置range_start = int(range_match[0]) if range_match[0] else 0# 结束位置range_end = int(range_match[1]) if range_match[1] else file_size - 1# 4，确保范围合法range_start = max(0, range_start)range_end = min(file_size - 1, range_end)# 5，计算实际要发送的数据大小content_length = range_end - range_start + 1# 6，创建响应：使用StreamingHttpResponse，将文件流式传输。206表示部分内容，200表示全部内容response = StreamingHttpResponse(file_iterator(file_path, range_start, range_end, chunk_size=8192),status=206 if range_header else 200,content_type=content_type)# 7，设置响应头response['Content-Length'] = content_lengthresponse['Accept-Ranges'] = 'bytes'response['Content-Disposition'] = f'attachment; filename="{file_name}"'if range_header:response['Content-Range'] = f'bytes {range_start}-{range_end}/{file_size}'response['Last-Modified'] = http_date(os.path.getmtime(file_path))# 模拟处理延迟，方便测试暂停/继续功能# time.sleep(0.1)  # 取消注释以添加人为延迟# 8，返回响应return responsedef file_iterator(file_path, start_byte=0, end_byte=None, chunk_size=8192):"""文件读取迭代器:param file_path: 文件路径:param start_byte: 起始字节:param end_byte: 结束字节:param chunk_size: 块大小"""with open(file_path, 'rb') as f:# 移动到起始位置f.seek(start_byte)# 计算剩余字节数remaining = end_byte - start_byte + 1 if end_byte else Nonewhile True:if remaining is not None:# 如果指定了结束位置，则读取剩余字节或块大小，取小的那个bytes_to_read = min(chunk_size, remaining)if bytes_to_read <= 0:breakelse:# 否则读取指定块大小bytes_to_read = chunk_sizedata = f.read(bytes_to_read)if not data:breakyield dataif remaining is not None:remaining -= len(data)# proj urls.py
from django.urls import path, includeurlpatterns = [# 下载文件path('download/', include(('download.urls', 'download'), namespace='download')),
]# download.urls.py
from django.urls import pathfrom download import viewsurlpatterns = [path('large_file/file_info/', views.file_info, name='file_info'),path('large_file/download_large_file/', views.download_large_file, name='download_large_file'),
]

2，核心功能解析

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

这个端点提供文件的基本信息，让前端能够规划下载策略：

功能：返回文件名称、大小和MIME类型
用途：前端根据文件大小和设置的块大小计算出需要下载的分块数量

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

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

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

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

response = StreamingHttpResponse(file_iterator(file_path, range_start, range_end, chunk_size=8192),status=206 if range_header else 200,content_type=content_type
)

3，返回响应头：设置必要的响应头，包括Content-Range指示返回内容的范围

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

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

这个函数创建一个迭代器，高效地读取文件的指定部分：

1，文件定位：将文件指针移动到请求的起始位置

f.seek(start_byte)

2，分块读取：按指定的块大小读取文件，避免一次性读取大量数据

data = f.read(bytes_to_read)

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

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组件):

提供配置选项：并发块数、块大小
显示下载进度：进度条、已下载量、下载速度、剩余时间提供操作按钮：开始、暂停、继续、取消
可视化显示每个分块的下载状态

<template><div class="enhanced-downloader"><div class="card"><h2>大文件分块下载</h2><div class="file-info" v-if="fileInfo"><p><strong>文件名:</strong> {{ fileInfo.name }}</p><p><strong>文件大小:</strong> {{ formatFileSize(fileInfo.size) }}</p><p><strong>类型:</strong> {{ fileInfo.type }}</p></div><div class="config-panel" v-if="!isDownloading && !isPaused"><div class="config-item"><label>并发块数:</label><select v-model="concurrency"><option :value="1">1</option><option :value="2">2</option><option :value="3">3</option><option :value="5">5</option><option :value="8">8</option></select></div><div class="config-item"><label>块大小:</label><select v-model="chunkSize"><option :value="512 * 1024">512 KB</option><option :value="1024 * 1024">1 MB</option><option :value="2 * 1024 * 1024">2 MB</option><option :value="5 * 1024 * 1024">5 MB</option></select></div></div><div class="progress-container" v-if="isDownloading || isPaused"><div class="progress-bar"><div class="progress" :style="{ width: `${progress}%` }"></div></div><div class="progress-stats"><div class="stat-item"><span class="label">进度:</span><span class="value">{{ progress.toFixed(2) }}%</span></div><div class="stat-item"><span class="label">已下载:</span><span class="value">{{ formatFileSize(downloadedBytes) }} / {{ formatFileSize(totalBytes) }}</span></div><div class="stat-item"><span class="label">速度:</span><span class="value">{{ downloadSpeed }}</span></div><div class="stat-item"><span class="label">已完成块:</span><span class="value">{{ downloadedChunks }} / {{ totalChunks }}</span></div><div class="stat-item"><span class="label">剩余时间:</span><span class="value">{{ remainingTime }}</span></div></div></div><div class="chunk-visualization" v-if="isDownloading || isPaused"><div class="chunk-grid"><divv-for="(chunk, index) in chunkStatus":key="index"class="chunk-block":class="{'downloaded': chunk === 'completed','downloading': chunk === 'downloading','pending': chunk === 'pending','error': chunk === 'error'}":title="`块 ${index + 1}: ${chunk}`"></div></div></div><div class="actions"><button@click="startDownload":disabled="isDownloading"v-if="!isDownloading && !isPaused"class="btn btn-primary">开始下载</button><button@click="pauseDownload":disabled="!isDownloading"v-if="isDownloading && !isPaused"class="btn btn-warning">暂停</button><button@click="resumeDownload":disabled="!isPaused"v-if="isPaused"class="btn btn-success">继续</button><button@click="cancelDownload":disabled="!isDownloading && !isPaused"class="btn btn-danger">取消</button></div><div class="status-message" v-if="statusMessage">{{ statusMessage }}</div></div></div>
</template><script setup>
import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
import {ChunkDownloader} from './downloadService';// API URL
const API_BASE_URL = 'http://localhost:8000/download/';// 下载配置
const concurrency = ref(3);
const chunkSize = ref(1024 * 1024); // 1MB
const downloader = ref(null);// 状态变量
const fileInfo = ref(null);
const isDownloading = ref(false);
const isPaused = ref(false);
const downloadedBytes = ref(0);
const totalBytes = ref(0);
const downloadedChunks = ref(0);
const totalChunks = ref(0);
const statusMessage = ref('准备就绪');
const downloadStartTime = ref(0);
const lastUpdateTime = ref(0);
const lastBytes = ref(0);
const downloadSpeed = ref('0 KB/s');
const remainingTime = ref('计算中...');
const speedInterval = ref(null);// 块状态
const chunkStatus = ref([]);// 计算下载进度百分比
const progress = computed(() => {if (totalBytes.value === 0) return 0;return (downloadedBytes.value / totalBytes.value) * 100;
});// 初始化
onMounted(async () => {try {await fetchFileInfo();} catch (error) {console.error('获取文件信息失败:', error);statusMessage.value = `获取文件信息失败: ${error.message}`;}
});// 清理资源
onUnmounted(() => {if (downloader.value) {downloader.value.cancel();}clearInterval(speedInterval.value);
});// 获取文件信息
async function fetchFileInfo() {const response = await fetch(`${API_BASE_URL}large_file/file_info/`);if (!response.ok) {throw new Error(`HTTP 错误! 状态码: ${response.status}`);}fileInfo.value = await response.json();totalBytes.value = fileInfo.value.size;// 根据文件大小初始化分块状态const initialTotalChunks = Math.ceil(fileInfo.value.size / chunkSize.value);chunkStatus.value = Array(initialTotalChunks).fill('pending');totalChunks.value = initialTotalChunks;
}// 开始下载
async function startDownload() {if (isDownloading.value) return;try {// 初始化下载器downloader.value = new ChunkDownloader(`${API_BASE_URL}`, {chunkSize: chunkSize.value,concurrency: concurrency.value,maxRetries: 3,onProgress: handleProgress,onComplete: handleComplete,onError: handleError,onStatusChange: handleStatusChange});// 初始化状态downloadedBytes.value = 0;downloadedChunks.value = 0;isDownloading.value = true;isPaused.value = false;statusMessage.value = '准备下载...';// 获取文件信息await downloader.value.fetchFileInfo();// 更新总块数totalChunks.value = Math.ceil(downloader.value.fileSize / chunkSize.value);chunkStatus.value = Array(totalChunks.value).fill('pending');// 开始下载downloadStartTime.value = Date.now();lastUpdateTime.value = Date.now();lastBytes.value = 0;startSpeedCalculator();await downloader.value.start();} catch (error) {console.error('下载启动失败:', error);statusMessage.value = `下载启动失败: ${error.message}`;isDownloading.value = false;}
}// 暂停下载
function pauseDownload() {if (!isDownloading.value || !downloader.value) return;downloader.value.pause();isDownloading.value = false;isPaused.value = true;statusMessage.value = '下载已暂停';clearInterval(speedInterval.value);
}// 继续下载
function resumeDownload() {if (!isPaused.value || !downloader.value) return;downloader.value.resume();isDownloading.value = true;isPaused.value = false;statusMessage.value = '继续下载...';// 重新开始速度计算lastUpdateTime.value = Date.now();lastBytes.value = downloadedBytes.value;startSpeedCalculator();
}// 取消下载
function cancelDownload() {if (!downloader.value) return;downloader.value.cancel();isDownloading.value = false;isPaused.value = false;downloadedBytes.value = 0;downloadedChunks.value = 0;statusMessage.value = '下载已取消';clearInterval(speedInterval.value);// 重置块状态chunkStatus.value = Array(totalChunks.value).fill('pending');
}// 处理进度更新
function handleProgress(data) {downloadedBytes.value = data.downloadedBytes;downloadedChunks.value = data.downloadedChunks;// 更新块状态（这里仅是简化的更新方式，实际上应该由downloader提供精确的块状态）const newChunkStatus = [...chunkStatus.value];const completedChunksCount = Math.floor(downloadedChunks.value);for (let i = 0; i < newChunkStatus.length; i++) {if (i < completedChunksCount) {newChunkStatus[i] = 'completed';} else if (i < completedChunksCount + concurrency.value && newChunkStatus[i] !== 'completed') {newChunkStatus[i] = 'downloading';}}chunkStatus.value = newChunkStatus;
}// 处理下载完成
function handleComplete(data) {isDownloading.value = false;isPaused.value = false;statusMessage.value = '下载完成';clearInterval(speedInterval.value);// 标记所有块为已完成chunkStatus.value = Array(totalChunks.value).fill('completed');
}// 处理错误
function handleError(error) {console.error('下载错误:', error);statusMessage.value = `下载错误: ${error.message}`;
}// 处理状态变化
function handleStatusChange(status, error) {switch (status) {case 'downloading':isDownloading.value = true;isPaused.value = false;statusMessage.value = '下载中...';break;case 'paused':isDownloading.value = false;isPaused.value = true;statusMessage.value = '下载已暂停';break;case 'completed':isDownloading.value = false;isPaused.value = false;statusMessage.value = '下载完成';break;case 'error':isDownloading.value = false;statusMessage.value = `下载错误: ${error?.message || '未知错误'}`;break;}
}// 启动下载速度计算器
function startSpeedCalculator() {clearInterval(speedInterval.value);speedInterval.value = setInterval(() => {const now = Date.now();const timeElapsed = (now - lastUpdateTime.value) / 1000; // 转换为秒const bytesDownloaded = downloadedBytes.value - lastBytes.value;if (timeElapsed > 0) {const speed = bytesDownloaded / timeElapsed; // 字节/秒downloadSpeed.value = formatFileSize(speed) + '/s';// 计算剩余时间if (speed > 0) {const bytesRemaining = totalBytes.value - downloadedBytes.value;const secondsRemaining = bytesRemaining / speed;remainingTime.value = formatTime(secondsRemaining);} else {remainingTime.value = '计算中...';}lastUpdateTime.value = now;lastBytes.value = downloadedBytes.value;}}, 1000);
}// 格式化文件大小
function formatFileSize(bytes) {if (bytes === 0) return '0 B';const k = 1024;const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];const i = Math.floor(Math.log(bytes) / Math.log(k));return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}// 格式化时间
function formatTime(seconds) {if (!isFinite(seconds) || seconds < 0) {return '计算中...';}if (seconds < 60) {return `${Math.ceil(seconds)}秒`;} else if (seconds < 3600) {const minutes = Math.floor(seconds / 60);const secs = Math.ceil(seconds % 60);return `${minutes}分${secs}秒`;} else {const hours = Math.floor(seconds / 3600);const minutes = Math.floor((seconds % 3600) / 60);return `${hours}小时${minutes}分钟`;}
}// 监听配置改变，更新块状态
watch([chunkSize], () => {if (fileInfo.value && fileInfo.value.size) {totalChunks.value = Math.ceil(fileInfo.value.size / chunkSize.value);chunkStatus.value = Array(totalChunks.value).fill('pending');}
});
</script><style scoped>
.enhanced-downloader {max-width: 800px;margin: 0 auto;padding: 20px;
}.card {background: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);padding: 20px;
}h2 {margin-top: 0;color: #333;
}.file-info {margin-bottom: 20px;
}.progress-container {margin-bottom: 20px;
}.progress-bar {height: 20px;background-color: #f0f0f0;border-radius: 10px;overflow: hidden;margin-bottom: 10px;
}.progress {height: 100%;background-color: #4CAF50;transition: width 0.3s ease;
}.progress-stats {display: flex;justify-content: space-between;font-size: 14px;color: #666;
}.actions {display: flex;gap: 10px;margin-bottom: 20px;
}.btn {padding: 8px 16px;border: none;border-radius: 4px;cursor: pointer;font-weight: bold;transition: background-color 0.3s;
}.btn:disabled {opacity: 0.5;cursor: not-allowed;
}.btn-primary {background-color: #4CAF50;color: white;
}.btn-warning {background-color: #FF9800;color: white;
}.btn-success {background-color: #2196F3;color: white;
}.btn-danger {background-color: #F44336;color: white;
}.status {font-style: italic;color: #666;
}
</style>

2，下载服务 (ChunkDownloader类):

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

// downloadService.js - 分块下载实现/*文件分块下载器*/
export class ChunkDownloader {constructor(url, options = {}) {this.url = url;this.chunkSize = options.chunkSize || 1024 * 1024; // 默认1MB每块this.maxRetries = options.maxRetries || 3;this.concurrency = options.concurrency || 3; // 并发下载块数this.timeout = options.timeout || 30000; // 超时时间this.fileSize = 0;this.fileName = '';this.contentType = '';this.chunks = [];this.downloadedChunks = 0;this.activeDownloads = 0;this.totalChunks = 0;this.downloadedBytes = 0;this.status = 'idle'; // idle, downloading, paused, completed, errorthis.error = null;this.onProgress = options.onProgress || (() => {});this.onComplete = options.onComplete || (() => {});this.onError = options.onError || (() => {});this.onStatusChange = options.onStatusChange || (() => {});this.abortControllers = new Map();this.pendingChunks = [];this.processedChunks = new Set();}// 获取文件信息async fetchFileInfo() {try {const response = await fetch(this.url + 'large_file/file_info/');if (!response.ok) {throw new Error(`无法获取文件信息: ${response.status}`);}const info = await response.json();this.fileSize = info.size;this.fileName = info.name;this.contentType = info.type;// 计算分块数量this.totalChunks = Math.ceil(this.fileSize / this.chunkSize);return info;} catch (error) {this.error = error;this.status = 'error';this.onStatusChange(this.status, error);this.onError(error);throw error;}}// 开始下载async start() {if (this.status === 'downloading') {return;}try {// 如果还没获取文件信息，先获取if (this.fileSize === 0) {await this.fetchFileInfo();}// 初始化状态this.status = 'downloading';this.onStatusChange(this.status);// 如果是全新下载，初始化块数组if (this.chunks.length === 0) {this.chunks = new Array(this.totalChunks).fill(null);this.pendingChunks = Array.from({length: this.totalChunks}, (_, i) => i);}// 开始并发下载this.startConcurrentDownloads();} catch (error) {this.error = error;this.status = 'error';this.onStatusChange(this.status, error);this.onError(error);}}// 开始并发下载startConcurrentDownloads() {// 确保同时只有指定数量的并发下载while (this.activeDownloads < this.concurrency && this.pendingChunks.length > 0) {const chunkIndex = this.pendingChunks.shift();this.downloadChunk(chunkIndex);}}// 下载指定的块async downloadChunk(chunkIndex, retryCount = 0) {if (this.status !== 'downloading' || this.processedChunks.has(chunkIndex)) {return;}this.activeDownloads++;const startByte = chunkIndex * this.chunkSize;const endByte = Math.min(startByte + this.chunkSize - 1, this.fileSize - 1);// 创建用于取消请求的控制器const controller = new AbortController();this.abortControllers.set(chunkIndex, controller);try {const response = await fetch(this.url + 'large_file/download_large_file/',{method: 'GET',headers: {'Range': `bytes=${startByte}-${endByte}`},signal: controller.signal,timeout: this.timeout});if (!response.ok && response.status !== 206) {throw new Error(`服务器错误: ${response.status}`);}// 获取块数据const blob = await response.blob();this.chunks[chunkIndex] = blob;this.downloadedChunks++;this.downloadedBytes += blob.size;this.processedChunks.add(chunkIndex);// 更新进度this.onProgress({downloadedChunks: this.downloadedChunks,totalChunks: this.totalChunks,downloadedBytes: this.downloadedBytes,totalBytes: this.fileSize,progress: (this.downloadedBytes / this.fileSize) * 100});// 清理控制器this.abortControllers.delete(chunkIndex);// 检查是否下载完成if (this.downloadedChunks === this.totalChunks) {this.completeDownload();} else if (this.status === 'downloading') {// 继续下载下一个块this.activeDownloads--;this.startConcurrentDownloads();}} catch (error) {this.abortControllers.delete(chunkIndex);if (error.name === 'AbortError') {// 用户取消，不进行重试this.activeDownloads--;return;}// 重试逻辑if (retryCount < this.maxRetries) {console.warn(`块 ${chunkIndex} 下载失败，重试 ${retryCount + 1}/${this.maxRetries}`);this.activeDownloads--;this.downloadChunk(chunkIndex, retryCount + 1);} else {console.error(`块 ${chunkIndex} 下载失败，已达到最大重试次数`);this.error = error;this.status = 'error';this.onStatusChange(this.status, error);this.onError(error);this.activeDownloads--;}}}// 完成下载completeDownload() {if (this.status === 'completed') {return;}try {// 合并所有块const blob = new Blob(this.chunks, {type: this.contentType});// 创建下载链接const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = this.fileName;document.body.appendChild(a);a.click();document.body.removeChild(a);// 清理资源setTimeout(() => URL.revokeObjectURL(url), 100);// 更新状态this.status = 'completed';this.onStatusChange(this.status);this.onComplete({fileName: this.fileName,fileSize: this.fileSize,contentType: this.contentType,blob: blob});} catch (error) {this.error = error;this.status = 'error';this.onStatusChange(this.status, error);this.onError(error);}}// 暂停下载pause() {if (this.status !== 'downloading') {return;}// 取消所有正在进行的请求this.abortControllers.forEach(controller => {controller.abort();});// 清空控制器集合this.abortControllers.clear();// 更新状态this.status = 'paused';this.activeDownloads = 0;this.onStatusChange(this.status);// 将当前处理中的块重新加入待处理队列this.pendingChunks = Array.from({length: this.totalChunks}, (_, i) => i).filter(i => !this.processedChunks.has(i));}// 继续下载resume() {if (this.status !== 'paused') {return;}this.status = 'downloading';this.onStatusChange(this.status);this.startConcurrentDownloads();}// 取消下载cancel() {// 取消所有正在进行的请求this.abortControllers.forEach(controller => {controller.abort();});// 重置所有状态this.chunks = [];this.downloadedChunks = 0;this.activeDownloads = 0;this.downloadedBytes = 0;this.status = 'idle';this.error = null;this.abortControllers.clear();this.pendingChunks = [];this.processedChunks.clear();this.onStatusChange(this.status);}// 获取当前状态getStatus() {return {status: this.status,downloadedChunks: this.downloadedChunks,totalChunks: this.totalChunks,downloadedBytes: this.downloadedBytes,totalBytes: this.fileSize,progress: this.fileSize ? (this.downloadedBytes / this.fileSize) * 100 : 0,fileName: this.fileName,error: this.error};}
}

2，核心技术原理

（1）HTTP Range请求

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

const response = await fetch(this.url + 'large_file/download_large_file/',{method: 'GET',headers: {'Range': `bytes=${startByte}-${endByte}`},signal: controller.signal,timeout: this.timeout});

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

（2）并发控制

代码通过控制同时活跃的下载请求数量来实现并发：

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

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

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

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

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

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

（5）暂停/恢复功能

通过AbortController取消活跃的请求，并保存未完成的块索引：

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

（6）文件合并和下载

所有块下载完成后，使用Blob API合并所有分块并创建下载链接：

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