前端大文件分片上传解决方案（看这一篇就够了）

前端大文件分片上传解决方案（看这一篇就够了）

码农世界 2024-05-29 前端 93 次浏览 0个评论

文章目录

    • 概要
    • 整体架构流程
    • 具体实现
      • 一，分片下载之本地储存（localForage）
      • 前言：
      • 二，本地数据获取（获取下载列表）
      • 二，操作JS
        • 1，下载进度监听
        • 2，文件下载状态控制
        • 3，分片下载
        • 二，VUE页面
        • 小结

          概要

          本文从前端方面出发实现浏览器下载大文件的功能。不考虑网络异常、关闭网页等原因造成传输中断的情况。分片下载采用串行方式（并行下载需要对切片计算hash，比对hash，丢失重传，合并chunks的时候需要按顺序合并等，很麻烦。对传输速度有追求的，并且在带宽允许的情况下可以做并行分片下载）

          整体架构流程

          1， 使用分片下载： 将大文件分割成多个小块进行下载，可以降低内存占用和网络传输中断的风险。这样可以避免一次性下载整个大文件造成的性能问题。

          2， 断点续传： 实现断点续传功能，即在下载中途中断后，可以从已下载的部分继续下载，而不需要重新下载整个文件。

          3， 进度条显示： 在页面上展示下载进度，让用户清晰地看到文件下载的进度。如果一次全部下载可以从process中直接拿到参数计算得出（很精细），如果是分片下载，也是计算已下载的和总大小，只不过已下载的会成片成片的增加（不是很精细）。

          4， 取消下载和暂停下载功能： 提供取消下载和暂停下载的按钮，让用户可以根据需要中止或暂停下载过程。

          5， 合并文件： 下载完成后，将所有分片文件合并成一个完整的文件。

          具体实现

          一，分片下载之本地储存（localForage）

          前言：

          浏览器的安全策略禁止网页（JS）直接访问和操作用户计算机上的文件系统。

          在分片下载过程中，每个下载的文件块（chunk）都需要在客户端进行缓存或存储，方便实现断点续传功能，同时也方便后续将这些文件块合并成完整的文件。这些文件块可以暂时保存在内存中或者存储在客户端的本地存储（如 IndexedDB、LocalStorage 等）中。

          使用封装，直接上代码：

          import axios from 'axios';
import ElementUI from 'element-ui'
import Vue from 'vue'
import localForage from 'localforage'
import streamSaver from 'streamsaver';
import store from "@/store/index"
/**
 * localforage–是一个高效而强大的离线存储方案。
 * 它封装了IndexedDB, WebSQL, or localStorage，并且提供了一个简化的类似localStorage的API。
 * 在默认情况下会优先采用使用IndexDB、WebSQL、localStorage进行后台存储，
 * 即浏览器不支持IndexDB时尝试采用WebSQL，既不支持IndexDB又不支持WebSQL时采用
 * localStorage来进行存储。
 * 
 */
/**
 * @description 创建数据库实例，创建并返回一个 localForage 的新实例。每个实例对象都有独立的数据库，而不会影响到其他实例
 * @param {Object} dataBase 数据库名
 * @return {Object} storeName 实例（仓库实例）
 */
function createInstance(dataBase){
  return localForage.createInstance({
    name: dataBase
  });
}
/**
 * @description 保存数据
 * @param {Object} name 键名
 * @param {Object} value 数据
 * @param {Object} storeName 仓库
 */
async function saveData(name, value, storeName){
  await storeName.setItem(name, value).then(() => {
    // 当值被存储后，可执行其他操作
    console.log("save success");
  }).catch(err => {
    // 当出错时，此处代码运行
    console.log(err)
  })
}
/**
 * @description 获取保存的数据
 * @param {Object} name 键名
 * @param {Object} storeName 仓库
 */
async function getData(name, storeName, callback){
  await storeName.getItem(name).then((val) => {
    // 获取到值后，可执行其他操作
    callback(val);
  }).catch(err => {
    // 当出错时，此处代码运行
    callback(false);
  })
}
/**
 * @description 移除保存的数据
 * @param {Object} name 键名
 * @param {Object} storeName 仓库
 */
async function removeData(name, storeName){
  await storeName.removeItem(name).then(() => {
    console.log('Key is cleared!');
  }).catch(err => {
    // 当出错时，此处代码运行
    console.log(err);
  })
}
/**
 * @description 删除数据仓库，将删除指定的 “数据库”（及其所有数据仓库）。
 * @param {Object} dataBase 数据库名
 */
async function dropDataBase(dataBase){
  await localForage.dropInstance({
    name: dataBase
  }).then(() => {
     console.log('Dropped ' + dataBase + ' database');
  }).catch(err => {
    // 当出错时，此处代码运行
    console.log(err);
  })
}
/**
 * @description 删除数据仓库
 * @param {Object} dataBase 数据库名
 * @param {Object} storeName 仓库名（实例）
 */
async function dropDataBaseNew(dataBase, storeName){
  await localForage.dropInstance({
    name: dataBase,
    storeName: storeName
  }).then(() => {
     console.log('Dropped',storeName)
  }).catch(err => {
    // 当出错时，此处代码运行
    console.log(err);
  })
}

          二，本地数据获取（获取下载列表）

          /**
 * @description 获取下载列表
 * @param {String} page 页面
 * @param {String} user 用户
 */
export async function getDownloadList(page, user, callback){
  // const key = user + "_" + page + "_";
  // const key = user + "_";
  const key = "_"; // 因为用户会过期 所以不保存用户名  直接以页面为键即可
  // 基础数据库
  const baseDataBase = createInstance(baseDataBaseName);
  await baseDataBase.keys().then(async function(keys) {
      // 包含所有 key 名的数组
      let fileList = [];
      for(let i = 0; i < keys.length; i++){
        if(keys[i].indexOf(key)>-1){
          // 获取数据
          await getData(keys[i], baseDataBase, async (res) =>{
            fileList.push(
              {
                'fileName': res, // 文件名
                'dataInstance': keys[i] // 文件对应数据库实例名
              }
            );
          })
        }
      }
      // 获取进度
      for(let i = 0; i < fileList.length; i++){
        const dataBase = createInstance(fileList[i].dataInstance);
        await getData(progressKey, dataBase,  async (progress) => {
          if(progress){
            fileList[i].fileSize = progress.fileSize;
            fileList[i].progress = progress.progress ? progress.progress : 0;
            fileList[i].status = progress.status ? progress.status : "stopped";
            fileList[i].url = progress.url;
          }
        });
      }
      callback(fileList);
  }).catch(function(err) {
      // 当出错时，此处代码运行
      callback(err);
  });
}

          二，操作JS

          1，下载进度监听
          /**
 * 文件下载进度监听
 */
const onDownloadProgres = (progress) =>{
  // progress对象中的loaded表示已经下载的数量，total表示总数量，这里计算出百分比
  let downProgress = Math.round(100 * progress.loaded / progress.total); 
  store.commit('setProgress', {
      dataInstance: uniSign,
      fileName: data.downLoad,
      progress: downProgress,
      status: downProgress == 100 ? 'success' : 'downloading',
      cancel: cancel
  })
}
          2，文件下载状态控制
          // 数据库进度数据主键
const progressKey = "progress";
/**
 * @description 状态控制
 * @param {String} fileName 文件名
 * @param {String} type 下载方式 continue:续传  again:重新下载  cancel:取消
 * @param {String} dataBaseName 数据库名 每个文件唯一
 * 
 */
async function controlFile(fileName, type, dataBaseName){
  if(type == 'continue'){
    
  } else if(type == 'again'){
    // 删除文件数据
    await dropDataBase(dataBaseName);
    // 基础数据库
    const baseDataBase = createInstance(baseDataBaseName);
    // 基础数据库删除数据库实例
    removeData(dataBaseName, baseDataBase);
  } else if(type == 'cancel'){
    // 删除文件数据
    await dropDataBase(dataBaseName);
    // 基础数据库
    const baseDataBase = createInstance(baseDataBaseName);
    // 基础数据库删除数据库实例
    await removeData(dataBaseName, baseDataBase);
    store.commit('delProgress', {
        dataInstance: dataBaseName
    })
  } else if(type == 'stop'){
    store.commit('setProgress', {
        dataInstance: dataBaseName,
        status: 'stopped',
    })
  }
}
          3，分片下载
          /**
 * @description 分片下载
 * @param {String} fileName 文件名
 * @param {String} url 下载地址
 * @param {String} dataBaseName 数据库名 每个文件唯一
 * @param {Object} progress 下载进度 type: continue:续传  again:重新下载  cancel:取消
 * 
 */
export async function downloadByBlock(fileName, url, dataBaseName, progress) {
  //调整下载状态
  if(progress.type){
    await controlFile(fileName, progress.type, dataBaseName);
  }
  
  // 判断是否超过最大下载数量
  let downloadNum = store.state.progressList;
  if(downloadNum){
    if(!progress.type && downloadNum.length == downloadMaxNum){
      ElementUI.Message.error("已超过最大下载量，请等待其他文件下载完再尝试!");
      return;
    }
  }
  
  // 基础数据库
  const baseDataBase = createInstance(baseDataBaseName);
  // 判断数据库中是否已存在该文件的下载任务
  let isError = false;
  await getData(dataBaseName, baseDataBase, async (res) =>{
    if(res && !progress.type){
      ElementUI.Message.error("该文件已在下载任务列表，无需重新下载!");
      isError = true;
    }
  });
  if(isError){
    return;
  }
  
  // 储存数据的数据库
  const dataBase = createInstance(dataBaseName);
  
  // 获取文件大小
  const response = await axios.head(url);
  // 文件大小
  const fileSize = +response.headers['content-length'];
  // 分片大小
  const chunkSize = +response.headers['buffer-size'];
  // 开始节点
  let start = 0;
  // 结束节点
  let end = chunkSize - 1;
  if (fileSize < chunkSize) {
    end = fileSize - 1;
  }
  // 所有分片
  let ranges = [];
  // 计算需要分多少次下载
  const numChunks = Math.ceil(fileSize / chunkSize);
  // 回写文件大小
  progress.fileSize = fileSize;
  progress.url = url;
  
  // 保存数据库实例
  await saveData(dataBaseName, fileName, baseDataBase);
  if(!progress.progress){
    // 保存进度数据
    await saveData(progressKey, progress, dataBase);
  }
  // 保存下载状态至localstorage  如果页面刷新 可重新读取状态 判断是否需要继续下载
  sessionStorage.setItem(dataBaseName,"downloading");
  
  // 组转参数
  for (let i = 0; i < numChunks; i++) {
    // 创建请求控制器 
    const controller = new AbortController();
    
    const range = `bytes=${start}-${end}`;
    // 如果是续传 先判断是否已下载
    if(progress.type == 'continue'){
      // 先修改状态
      store.commit('setProgress', {
          dataInstance: dataBaseName,
          status: 'downloading'
      })
      let isContinue = false;
      await getData(range, dataBase, async function(res){ if(res) isContinue = true});
      if(isContinue){
        ranges.push(range);
        // 重置开始节点
        start = end + 1;
        // 重置结束节点
        end = Math.min(end + chunkSize, fileSize - 1);
        continue;
      }
    }
    let cancel;
    const config = {
      headers: {
        Range: range
      },
      responseType: 'arraybuffer',
      // 绑定取消请求的信号量
      signal: controller.signal, 
      // 文件下载进度监听
      onDownloadProgress: function (pro){
        if(progress.type == 'stop' || progress.type == 'cancel'){
           // 终止请求
          controller.abort();
        }
        
        // 已加载大小
        // progress对象中的loaded表示已经下载的数量，total表示总数量，这里计算出百分比
        let downProgress = (pro.loaded / pro.total); 
        downProgress = Math.round( (i / numChunks) * 100 + downProgress  / numChunks * 100);
        progress.progress = downProgress;
        // 设置为异常  如果是正常下载完 这个记录会被删除 如果合并失败  则会显示异常
        progress.status = downProgress == 100 ? 'error' : 'stopped';
        store.commit('setProgress', {
            dataInstance: dataBaseName,
            fileName: fileName,
            progress: downProgress,
            status: 'downloading',
            cancel: cancel,
            url: url,
            dataBaseName: dataBaseName
        })
      }
    };
    try {
      // 开始分片下载
      const response = await axios.get(url, config);
      // 保存分片数据
      await saveData(range, response.data, dataBase);
        
      ranges.push(range);
      // 重置开始节点
      start = end + 1;
      // 重置结束节点
      end = Math.min(end + chunkSize, fileSize - 1);
        
    } catch (error) {
      console.log("终止请求时catch的error---", error);
      // 判断是否为取消上传
      if (error.message == "canceled"){
          // 进行后续处理
          if(progress.type == 'stop'){
            // 暂停
            await controlFile(fileName, progress.type, dataBaseName);
            sessionStorage.setItem(dataBaseName,"stop");
             // 终止请求
            console.log("stopped");
            return;
          } else if(progress.type == 'cancel'){
            // 取消
            await controlFile(fileName, progress.type, dataBaseName);
            sessionStorage.removeItem(dataBaseName);
            // 终止请求
            console.log("canceled");
            return;
          }
      };
    }
  }
  console.log("开始合入");
  // 流操作
  const fileStream = streamSaver.createWriteStream(fileName, {size: fileSize});
  const writer = fileStream.getWriter();
  // 合并数据
  // 循环取出数据合并
  for (let i=0; i < ranges.length; i++) {
    var range = ranges[i];
    // 从数据库获取分段数据
    await getData(range, dataBase, async function(res){
      if(res){
        // 读取流
        const reader = new Blob([res]).stream().getReader();
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          // 写入流
          writer.write(value)
        }
        // 结束写入
        if(i==ranges.length-1){
          writer.close();
          // 清空数据库
          dropDataBase(dataBaseName);
          // 基础数据库删除数据库实例
          removeData(dataBaseName, baseDataBase);
          // 清除store
          store.commit('delProgress', {
            dataInstance: dataBaseName
          })
        } 
      }
    }); 
  }
}

          二，VUE页面

          小结

          这只是一个基本示例。在实际应用中，你可能需要考虑以下问题：

          并发下载： 如果多个用户同时下载相同的大文件，可能会对服务器造成很大的压力。可以使用并发下载来提高性能。

          安全性： 确保只有授权用户可以下载文件，并且不会泄漏敏感信息。

          性能优化： 使用缓存、压缩等技术来提高下载速度和用户体验。

          服务器资源管理： 下载大文件可能会占用服务器的网络带宽和内存资源，需要适当的管理。

          总之，大文件分片下载和合并是一个复杂的任务，需要综合考虑性能、安全性和用户体验。在实际项目中，你可能会使用更高级的工具和技术来处理这些问题。

转载请注明来自码农世界，本文标题：《前端大文件分片上传解决方案（看这一篇就够了）》

百度分享代码，如果开启HTTPS请参考李洋个人博客
37815篇文章 站点 微博
每一天，每一秒，你所做的决定都会改变你的人生！

发表评论

快捷回复：

评论列表 （暂无评论，93人围观）参与讨论

还没有评论，来说两句吧...

Top