大文件-分片下载

0.需求背景

文件过大，单次文件流数据过多
需要有下载进度
需要提高下载速度

1.大文件下载的解决思路

获取文件大小，根据实际网络情况设置分片大小，确定份数
根据分片的大小索引，获取分片的流数据
所有的分片下载后，合并成最终文件

2.核心代码参考

前端 vue3

const downFile = async () => {  progress.value = 0;  finalFine.value = 0;  //获取文件的大小  let {fileName, contentLength} = await getFileSize();  //根据大小，去获取  let RANGE_SIZE = 1024 * 1024  let total = Math.ceil(contentLength / RANGE_SIZE);//向上取整  let fileArr = []  for (let i = 0; i < total; i++) {  let start = i * RANGE_SIZE  let end = start + RANGE_SIZE - 1  let range = end >= contentLength ? contentLength - start : RANGE_SIZE  fileArr.push({  index: i,  start: start,  end: end,  range: range,  chunk: undefined,  downloadTimes: 0  })  }  getFileChunkArray(fileArr, total, fileName);  
}  async function getFileSize() {  //获取文件的大小  let response = await axios({  method: 'get',  url: 'bigfile/getFileSize',  params: {}  })  let result = response.data;  let contentLength = result.contentLength;  let fileName = result.fileName;  console.log("contentLength: ", contentLength);  return {fileName: fileName, contentLength: contentLength}  
}  const getFileChunkArray = async (fileArr, total, fileName) => {  let pool = [] // 并发池  const max = 10 // 并发池异步操作的数量 ★ 设置太大或者太小,都不合适,会引起并发问题  let failList = [] // 下载失败的文件列表  let finish = 0  // 下载完成的数量  if (fileArr.length === 0) {  fineList.sort((a, b) => a.index - b.index);  let arrayBufferArray = fineList.map(item => item.chunk);  const blob = new Blob(arrayBufferArray, {type: 'application/octet-stream'});  const a = document.createElement('a');  a.href = URL.createObjectURL(blob);  a.download = fileName;  a.click();  }  for (const item of fileArr) {  let index = item.index  let start = item.start  let end = item.end  let range = item.range  let downloadTimes = item.downloadTimes  if (downloadTimes > 5) {  console.log("异常,已执行超过5次 ----- ")  break  }  console.log("range: ", index, `bytes=${start}-${end}`, range);  let res = axios({  method: 'get',  url: 'bigfile/download',  params: {  index: index,  start: start,  end: end,  range: range,  },  responseType: 'blob'  })  // 把下载文件的异步操作放入并发池里  pool.push(res)  if (pool.length === max) {  // 每当并发池跑完一个任务，就再塞入一个任务  await Promise.race(pool)  }  res.then((response) => {  let clip = response.data;  fineList.push({...item, chunk: clip})  finalFine.value++  progress.value = Math.round((finalFine.value) / total * 10000) / 100  // console.log('response: ', response)  console.log('下载进度 ----- ', finalFine.value, total, progress.value + '%')  }).catch((response) => {  console.log('response-error: ', response)  // 请求失败，从并发池里移除，添加到失败的文件列表  const index = pool.findIndex(it => it === res)  pool.splice(index, 1)  item.downloadTimes++;  failList.push(item)  }).finally(() => {  finish++  // 如果请求都完成了，递归调用自己，把下载失败的文件列表再下载一次  if (finish === fileArr.length) {  getFileChunkArray(failList, total, fileName);  }  })  }  
}

后端java

/**  * 获取文件大小  *  * @param request 请求  * @return {@link JSONObject }  * @author Ysy  **/@RequestMapping(value = "/getFileSize", method = RequestMethod.GET)  
public JSONObject getFileSize(HttpServletRequest request) {  JSONObject result = new JSONObject();  String filePath = "D:\\" + downloadFile;  System.out.println(filePath);  File file = new File(filePath);  long contentLength = 0;  if (file.exists()) {  contentLength = file.length();  }  result.put("contentLength", contentLength);  result.put("fileName", downloadFile);  return result;  
}  /**  * 下载  *  * @param request  请求  * @param response 响应  * @param index    指数  * @param start    开始  * @param end      结束  * @param range    范围  * @return {@link ResponseEntity }  * @author Ysy  **/@RequestMapping(value = "download", method = RequestMethod.GET)  
public ResponseEntity download(HttpServletRequest request, HttpServletResponse response,  @RequestParam(value = "index", defaultValue = "") long index,  @RequestParam(value = "start", defaultValue = "") long start,  @RequestParam(value = "end", defaultValue = "") long end,  @RequestParam(value = "range", defaultValue = "") int range  
) throws IOException {  String filePath = "D:\\" + downloadFile;  File file = new File(filePath);  if (!file.exists()) {  }  System.out.println(index);  // 返回 ResponseEntity    try (  FileInputStream fis = new FileInputStream(file);  FileChannel channel = fis.getChannel()) {  // 设置起始位置  channel.position(start);  ByteBuffer buffer = ByteBuffer.allocate(range);  int bytesRead = channel.read(buffer);  if (bytesRead > 0) {  buffer.flip();  byte[] data = new byte[bytesRead];  buffer.get(data);  HttpHeaders headers = new HttpHeaders();  headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);  headers.setContentLength(bytesRead);  return new ResponseEntity<>(data, headers, HttpStatus.OK);  } else {  return new ResponseEntity<>(HttpStatus.NO_CONTENT);  }  }  
}

效果

在这里插入图片描述

4.案例源码

百度网盘链接：https://pan.baidu.com/s/15TZCM4dfgDRRBneyHJEkaQ

码微信小程序。获取 提取码

大文件分片下载.png|600

分片下载和A标签下载对比

1. 基本概念

- 分片下载：

分片下载是一种将文件分割成多个部分（片）进行下载的技术。它通过多线程或多任务的方式，同时从服务器获取文件的不同部分。例如，一个大文件被分成10个部分，程序可以同时开启多个连接，分别下载这10个部分，然后在本地将这些部分组合成完整的文件。这种方式可以充分利用网络带宽，提高下载速度。在一些专业的下载工具（如迅雷）中，就广泛应用了分片下载技术。

- A标签下载：

<a>标签是HTML中的超链接标签。当使用<a>标签进行下载时，用户点击链接后，浏览器会根据链接指向的资源类型和服务器的配置，尝试以默认的方式下载文件。例如，<a href="example.pdf" download>下载文件</a>，当用户点击这个链接时，浏览器会开始下载example.pdf文件。它的下载过程相对比较简单直接，通常是单线程的，由浏览器直接处理下载请求。