前端大文件分片下载具体实现方法(看这一篇就够了)
作者：littleMonster_LC
本文介绍了在浏览器中下载大文件的技术方案,包括分片下载、断点续传、进度条显示、取消及暂停下载和文件合并等功能,分片下载可以降低网络传输中断的风险,并减少内存占用,需要的朋友可以参考下
概要
本文从前端方面出发实现浏览器下载大文件的功能。不考虑网络异常、关闭网页等原因造成传输中断的情况。分片下载采用串行方式（并行下载需要对切片计算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页面
<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>
小结
这只是一个基本示例。在实际应用中，你可能需要考虑以下问题：
并发下载： 如果多个用户同时下载相同的大文件，可能会对服务器造成很大的压力。可以使用并发下载来提高性能。
安全性： 确保只有授权用户可以下载文件，并且不会泄漏敏感信息。
性能优化： 使用缓存、压缩等技术来提高下载速度和用户体验。
服务器资源管理： 下载大文件可能会占用服务器的网络带宽和内存资源，需要适当的管理。
总之，大文件分片下载和合并是一个复杂的任务，需要综合考虑性能、安全性和用户体验。在实际项目中，你可能会使用更高级的工具和技术来处理这些问题。
总结
到此这篇关于前端大文件分片下载具体实现方法的文章就介绍到这了,更多相关前端大文件分片下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！