前端大文件分片下载解决方案,没用你来砍我

这篇具有很好参考价值的文章主要介绍了前端大文件分片下载解决方案,没用你来砍我。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

一、背景

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

  1. nginx配置允许下载大小超限
  2. 网络带宽限制,导致龟速下载;
  3. 下载长时间连接可能会导致超时

针对上述问题,找到一个合理的解决方案 分片下载,既可不超限亦不需要保持长连接,如果出现网络波动断开连接,亦可断点续传。多的不说,直接上干货。

二、代码实现

1.后端

创建下载工具类DownloadUtil.java

public class DownloadUtil {
    /**
     * 每个分片大小 50M
     */
    private final static int BUFFER_SIZE = 1024 * 1024 * 50;

    public static void downloadByBlock(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(dataBasseName, 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;
			}
		}

		let cancel;
		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;
			}
		}
		// 下载完成后 开始合并分片数据
		// 流操作
		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(dataBasse){
	await localForage.dropInstance({
		name: dataBase
	})then(()=>{
		// success
	}).catch(err=>{
		// err
	})
}

3.效果展示

localforage数据展示

F12打开管理器,application -> indexedDB
前端的分片下载,前端,后端,前端,java,vue

下载进度展示

前端的分片下载,前端,后端,前端,java,vue

三、总结

以上就是所有核心代码,当前功能涉及到下载、暂停、续传、取消,也可动态展示下载进度,因为是纯手工敲的,所以可能会有个别错误,见谅。其他细枝末节的代码就不在这陈述,再就是功能代码之前赶得比较急,也没怎么仔细整理,有些地方可能有更优的解法,欢迎大家评论区讨论文章来源地址https://www.toymoban.com/news/detail-779960.html

到了这里,关于前端大文件分片下载解决方案,没用你来砍我的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 高速下载VisualGLM模型文件的解决方案

      大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作

    2024年02月12日
    浏览(37)
  • Java文件下载中文文件名乱码的解决方案

      大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作

    2024年02月13日
    浏览(55)
  • java实现浏览器下载附件时文件名中文乱码解决方案

    方案一:URLEncoder 解决 IE 和 谷歌浏览器的附件中文名问题。 如果客户端浏览器是 IE 浏览器 或者 是谷歌浏览器。我们需要使用 URLEncoder 类先对中文名进行 UTF-8 的编码 操作。 因为 IE 浏览器和谷歌浏览器收到含有编码后的字符串后会以 UTF-8 字符集进行解码显示。 方案二:B

    2024年03月09日
    浏览(64)
  • [Vivado下载bit文件后不能在线捕获FPGA波形] - 解决方案详解

    [Vivado下载bit文件后不能在线捕获FPGA波形] - 解决方案详解 对于使用 FPGA 进行开发的工程师来说,Vivado 下载 bit 文件并在线捕获波形是一项非常基本的技能。然而,有时在下载 bit 文件之后,我们却无法在线捕获波形。这个问题可能会导致我们无法深入调试硬件问题。本文将详

    2024年02月04日
    浏览(38)
  • Github上git lfs oid sha256文件无法下载的解决方案

    当我克隆Github上的一个库时,其中有一个包的内容格式如下: version https://git-lfs.github.com/spec/v1 oid sha256:一堆数字和字母 size 一堆数字 这堆东西类似百度网盘的下载链接和密码,并不是一个完整文件,只是一个链接。 使用Git lfs重新clone这个项目时,仍然没有解决这个问题,因

    2024年02月09日
    浏览(42)
  • 前端登陆加密解决方案

    项目背景 环食药烟草的数据下载模块中,需要判断用户在进行数据下载时是进行了登录操作,如果没有登录要跳转登陆页面,输入账号和密码进行登录。 使用场景 项目中需要前端书写登录页面,用户输入账号密码,前端获取到用户输入的账号密码做登陆操作时需要采用对密

    2024年02月22日
    浏览(43)
  • 【前端】内存泄露及解决方案

    内存泄漏是指在程序运行时,分配的内存没有被正确释放,导致内存空间的浪费,最终可能会导致程序崩溃或运行缓慢。 内存泄漏通常是由于程序员在代码中使用不当的内存管理技术或者逻辑错误导致的。例如,程序员可能会忘记释放不再需要的内存块,或者使用了错误的内

    2024年02月16日
    浏览(45)
  • 记录--解决前端内存泄漏:问题概览与实用解决方案

    内存泄漏是前端开发中的一个常见问题,可能导致项目变得缓慢、不稳定甚至崩溃。在本文中,我们将深入探讨在JavaScript、Vue和React项目中可能导致内存泄漏的情况,并提供详细的代码示例,以帮助开发人员更好地理解和解决这些问题。 1. 未正确清理事件处理器 JavaScript中的

    2024年02月11日
    浏览(44)
  • 前端跨域解决方案——CORS

    CORS(跨来源资源共享)是一种用于解决跨域问题的方案。 CORS(跨来源资源共享)是一种安全机制,用于在浏览器和服务器之间传递数据时,限制来自不同域名的请求。在前端开发中,当通过 XMLHttpRequest(XHR)或 Fetch API 发送跨域请求时,如果服务器没有正确配置 CORS,浏览器

    2023年04月27日
    浏览(50)
  • 前端的8种跨域解决方案

    在前端开发中,常见的跨域解决方案有以下8种: JSONP(JSON with Padding):利用 script 标签的跨域特性,通过动态创建 script 标签,请求一个带有回调函数的接口,服务器返回的数据会作为回调函数的参数传入,从而实现跨域请求。 CORS(Cross-Origin Resource Sharing):通过服务器设

    2024年02月09日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包