前端大文件分片下载办理方案，没用你来砍我

大号在练葵花宝典 · 2024-6-20 16:28:20

前言

好记性不如烂笔头，站在岸上学不会游泳。这次分享一是为了纪录下忙碌几天的成果，方便以后查阅；二是克制别人走弯路，给别人方便就是给自己方便。
一、背景

客户下载超大文件(1G以上)时，下载非常断开，分析了下有以下原因：

nginx设置允许下载巨细超限
网络带宽限定，导致龟速下载；
下载长时间连接可能会导致超时

针对上述题目，找到一个合理的办理方案 分片下载，既可不超限亦不必要保持长连接，假如出现网络颠簸断开连接，亦可断点续传。多的不说，直接上干货。
二、代码实现

1.后端

创建下载工具类DownloadUtil.java

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URLEncoder;
public class DownloadUtil {
/**
* 每个分片大小 50M
*/
private final static int BUFFER_SIZE = 1024 * 1024 * 50;
public static void downloadByBlock(File file, HttpServletRequest request, HttpServletResponse response) throws IOException {
// 获取文件名
String fileName = file.getName();
// 获取文件大小
long fileSize = file.length();
// 设置返回头
response.setContentType("application/octect-stream;charset=UTF-8");
response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(fileName, "UTF-8"));
response.setHeader("Accept-Ranges", "bytes");
// 判断是否包含Range
String rangeHeader = request.getHeader("Range");
if (rangeHeader == null) {
// 返回文件大小信息
response.setHeader("Content-Length", String.valueOf(fileSize));
response.setHeader("Buffer-Size", String.valueOf(BUFFER_SIZE));
response.setHeader("Access-Control-Expose-Headers", "Buffer-Size");
} else {
// 分片下载
long start = 0;
long end = fileSize - 1;
String[] range = rangeHeader.split("=")[1].split("-");
if (range.length == 1) {
start = Long.parseLong(range[0]);
end = fileSize - 1;
} else {
start = Long.parseLong(range[0]);
end = Long.parseLong(range[1]);
}
long contentLength = end - start + 1;
// 返回头里存放每次读取的开始和结束字节
response.setHeader("Content-Length", String.valueOf(contentLength));
response.setHeader("Content-Range", "bytes " + start + "-" + end + "/" + fileSize);
InputStream in = new FileInputStream(file);
OutputStream out = response.getOutputStream();
// 跳到第start字节
in.skip(start);
byte[] buffer = new byte[BUFFER_SIZE];
int bytesRead = -1;
long bytesWritten = 0;
while ((bytesRead = in.read(buffer)) != -1) {
if (bytesWritten + bytesRead > contentLength) {
out.write(buffer, 0, (int) (contentLength - bytesWritten));
break;
} else {
out.write(buffer, 0, bytesRead);
bytesWritten += bytesRead;
}
}
in.close();
out.close();
}
}
}

复制代码

后端代码借鉴其他博友来源
2.前端

前端使用vue脚手架项目作为实例，也可用其他方式实现;
当前实例必要用到的技术：
localforage:localForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验,最最紧张的一点是通过它可以将数据持久化至本地磁盘
streamsaver:用于实如今Web欣赏器中直接将大文件流式传输到用户装备的功能
创建工具类 download.js

import axios from 'axios';
import localForage from 'localforage'
import streamSaver from 'streamsaver'
import store from "@/store/index"
// 基础数据库存放其他文件的数据库实例名
const baseDataBaseName = "localforageInstance";
// 数据库进度数据主键
const progressKey = "progress";
/**
* @description 分片下载
* @param fileName 文件名
* @param url 下载地址
* @param dataBaseName 数据库名，用于存放分片数据每个文件唯一
* @param progress 下载进度 type:continue 续传 again重新下载 cancel取消
*/
export async function downloadByBlock(fileName, url, dataBaseName, progress) {
if(progress.type){
await controlFile(fileName, progress.type, dataBaseName)
}
// 创建基础数据库用于保存文件信息
const baseDataBase = createInstance(baseDataBaseName);
// 判断数据库中是否已存在该文件的下载任务
let isError = false;
await getData(dataBaseName, baseDataBase, async(res) => {
if(res && !progress.type){
alert("已存在下载进度!");
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);
}
// 组装参数用于准备分片下载文件数据
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;
}
}
const config = {
headers: {
Range: range
},
responseType: 'arraybuffer',
// 绑定取消请求的信号量
signal: controller.signal,
// 文件下载进度监听
onDownloadProgress: function(pro){
if(progress.type == 'stop' || progress.type == 'cancel'){
// 终止请求
controller.abort();
}
// 获取当前分片的下载进度 loaded表示已下载的数量 total表示总数量
let downProgress = (pro.loaded / pro.total);
// 计算整个文件的下载进度
downProgress = Math.round((i / numChunks) * 100 + downProgress / numChunks * 100);
store.commit('setProgress',{
dataInstance: dataBaseName,
fileName: fileName,
progress: downProgress,
status: downProgress == 100 ? 'success' : 'downloading'
})
}
};
try{
// 开始分片下载
const response = await axios.get(url, config);
// 【重点1】以分片名为key保存分片数据至本地磁盘如果用localstorage 保存至浏览器内存，数据太多会导致浏览器奔溃
await saveData(range, response.data, dataBase);
// 将分片名保存方便后面通过key取出分片数据
ranges.push(range);
// 重置开始节点
start = end + 1;
// 重置结束节点
end = Math.min(end + chunkSize, fileSize -1);
} catch (error) {
// 如果中途终止请求，会有异常信息所以在此处理
if(error.message == "canceled"){
await controlFile(fileName, progress.type, dataBaseName);
return;
}
}
}
// 下载完成后开始合并分片数据
// 流操作
// 如果项目在内网，连接不了外部网络或者没法连接github，需要把streamSaver模块中的mitm.html和sw.js手动拷贝至项目public目录下，然后重新配置mitm地址即可
// streamSaver.mitm="http://localhost:8081/mitm.html?version=2.0.0"
const fileStream = streamSaver.createWriteStream(fileName, {size: fileSize});
const writer = fileStream.getWriter();
// 循环分片名
for(let i = 0;i < ranges.length; i++){
let range = ranges[i];
// 从数据库获取分片数据
await getData(range, dataBase, async function(res){
if(res){
// 【重点2】读取流不能将流数据直接存到浏览器内存中然后合并,这样同样会使浏览器崩溃
// let 分片数据1 = [];
// let 分片数据2 = [];
// let 分片数据。。。
// 合并 let array = 分片数据1 + 分片数据2 + ...
// 这种不可取
// 读出来就直接生成文件往磁盘写不在内存中停留
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
})
}
}
})
}
}
/**
* @description 状态控制
* @param fileName 文件名
* @param dataBaseName 数据库名，用于存放分片数据每个文件唯一
* @param type下载方式 continue 续传 again重新下载 cancel取消
*/
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
store.commit('delProgress',{
dataInstance: dataBaseName
})
}else if(type == 'stop'){
store.commit('setProgress',{
dataInstance: dataBaseName,
status: 'stopped'
})
}
}

复制代码

localforage 干系方法

/**
* @description 创建数据库实例每个实例对象都有独立的数据库不会影响其他实例
* @param dataBasse 数据库名
*/
function createInstance(dataBase){
return localForage.createInstance({
name: dataBase
});
}
/**
* @description 保存数据
* @param name 键名
* @param value 数据
* @param storeName 仓库/数据库实例
*/
async function saveData(name, value, storeName){
await storeName.setItem(name,value).then(()=>{
// success
}).catch(err=>{
// err
})
}
/**
* @description 获取数据
* @param name 键名
* @param storeName 仓库/数据库实例
* @param callback 回调函数
*/
async function getData(name, storeName, callback){
await storeName.getItem(name).then((val)=>{
// success
callback(val);
}).catch(err=>{
// err
callback(false);
})
}
/**
* @description 移除数据
* @param name 键名
* @param storeName 仓库/数据库实例
*/
async function removeData(name, storeName){
await storeName.removeItem(name).then(()=>{
// success
}).catch(err=>{
// err
})
}
/**
* @description 删除数据库实例
* @param dataBasse 数据库名
*/
async function dropDataBase(dataBase){
await localForage.dropInstance({
name: dataBase
}).then(()=>{
// success
}).catch(err=>{
// err
})
}

复制代码

3.效果展示

localforage数据展示

F12打开管理器，application -> indexedDB

下载进度展示

三、总结

以上就是全部核心代码，当前功能涉及到下载、暂停、续传、取消，也可动态展示下载进度，因为是纯手工敲的，所以可能会有个别错误，见谅。其他细枝末节的代码就不在这陈述，再就是功能代码之前赶得比较急，也没怎么细致整理，有些地方可能有更优的解法，接待各人批评区讨论

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

前端大文件分片下载办理方案，没用你来砍我

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云