前端大文件分片下载具体实现方法(看这一篇就够了)

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);
  });
}

/**
 * 文件下载进度监听
 */
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
  })
}

// 数据库进度数据主键
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',
    })
  }
}

/**
 * @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
          })
        } 
      }
    }); 
  }
}

<script>
import { downloadbyblock } from "上面的js";
export default {
  name: "suspension",
  data() {
    return {
      // 下载列表
      downloaddialog: false,
      filestatus: {}
    };
  },
  watch: {
    "$store.state.progresslist": function() {
      this.$nexttick(function() {
        let progresslist = this.$store.state.progresslist;
        progresslist.foreach(item => {
          // 获取之前下载状态 还原操作
          const status = sessionstorage.getitem(item.datainstance);
          if (status == "downloading" && item.status != status) {
            this.startdownload(item);
          }
        });
      });
    }
  },
  methods: {
    /**
     * @description 重试
     * @param {object} row
     */
    retrydownload(row) {
      this.startdownload(row);
    },
    /**
     * @description 开始下载
     * @param {object} row
     */
    startdownload(row) {
      this.filestatus[row.datainstance] = {
        type: "continue",
        progress: row.progress
      };
      downloadbyblock(
        row.filename,
        row.url,
        row.datainstance,
        this.filestatus[row.datainstance]
      );
    },
    /**
     * @description 暂停下载
     * @param {object} row
     */
    stopdownload(row) {
      this.$set(this.filestatus[row.datainstance], "type", "stop");
    },
    /**
     * @description 删除下载
     * @param {object} row
     */
    deldownload(row) {
      if (this.filestatus[row.datainstance] && row.status != "stopped") {
        this.$set(this.filestatus[row.datainstance], "type", "cancel");
      } else {
        this.filestatus[row.datainstance] = { type: "cancel" };
        downloadbyblock(
          row.filename,
          row.url,
          row.datainstance,
          this.filestatus[row.datainstance]
        );
      }
    },
    /**
     * @description 分片下载文件
     */
    downloadbyblock(filename, url, databasename, type) {
      this.filestatus[databasename] = { type: type };
      downloadbyblock(
        filename,
        url,
        databasename,
        this.filestatus[databasename]
      );
      this.btndownload();
    },
    /**
     * @description 下载列表
     */
    btndownload() {
      // 通过路由信息判断当前处于哪一个页面
      const page = this.$route.name;
      this.downloaddialog = true;
    },



    /**
     * @description 取消弹窗
     */
    downloadbtncancel() {
      this.downloaddialog = false;
    }
  }
};
</script>