文章目录

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

二，VUE页面

小结

概要

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

整体架构流程

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

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

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

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

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

具体实现

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

前言：

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

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

使用封装，直接上代码：

<code>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页面

<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>

小结

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

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

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

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

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

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