大文件-分片下载

DO_IT_JACK

已于 2024-10-08 18:08:15 修改

阅读量659

点赞数 2

文章标签： java vue.js

于 2024-10-08 18:06:25 首次发布

本文链接：https://blog.csdn.net/weixin_40231090/article/details/142765929

版权

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文件。它的下载过程相对比较简单直接，通常是单线程的，由浏览器直接处理下载请求。