浏览器如何处理大数据量的文件？

最新推荐文章于 2023-05-24 12:13:22 发布

失败如我

最新推荐文章于 2023-05-24 12:13:22 发布

阅读量2.5k

点赞数

文章标签： javascript html web

本文链接：https://blog.csdn.net/dadaddaddad/article/details/124000663

版权

问题描述：

最近有个需求需要对超过1G的文件进行处理，例如生成布隆过滤器文件等，由于文件是在本地，需要本地上传到服务端去处理，由于数据量比较大，对网络的压力比较大，所以考虑是否可以在本地进行处理完然后再上传。
注：处理完的数据比较小，约几十M

解题方法：

本地处理的方法如下：
1. 提供一个本地的数据处理小工具(与语言无关)，然后处理完成的数据进行上传；
2. 通过浏览期进行处理，处理完然后上传；
对比1和2, 其中1实现比较简单，但是需要兼容多种系统，同时用户使用有成本，所以选用2方式实现，2只需要用户使用浏览器就可以

浏览器的web api提供了FileReader对象，允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
由于数据量比较大，采用异步读取的方式，每次读取固定的大小的文件，通过readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。具体见https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>处理大数据量文件</title>
	</head>
	<body>
		<input type="file" id="file" placeholder="选择文件"/>
		<button id="bloom-filter">生成布隆过滤器</button>
		<button onclick="saveToFile()">保存文件</button>
		<!-- <button onclick="getFileHandle()">保存文件为</button> -->
	</body>
	<script src="https://github.com/jasondavies/bloomfilter.js/blob/master/bloomfilter.js" type="text/javascript" charset="utf-8"></script>
	<!-- js文件可以下载引入或npm引入 -->
	<script>
		var bloom = new BloomFilter(
		  32 * 256, // number of bits to allocate.
		  16        // number of hash functions.
		);
		var prev = ''
	    document.getElementById('bloom-filter').onclick = function () {
	        let file = document.getElementById('file').files[0];
	        let fr = new FileReader();
	        let CHUNK_SIZE = 10 * 1024;
	        let startTime, endTime;
	        let reverse = false;
	        fr.onload = function () {
	            let buffer = new Uint8Array(fr.result);
				let txt = new TextDecoder('utf-8').decode(buffer.slice())
				let arr = txt.split(/[(\r\n)\r\n]+/);
				let len = arr.length - 1
				arr.forEach((item, index)=>{
					if (index == 0) {
						item = prev + item
					}
					if (index == len && item != "") {
						prev = item
					} else {
						bloom.add(item)
					}
				})
				var bloomTxt = toJson()
				wirteToFile(bloomTxt)
	        }
	        segment();
	        function segment() {
	            let start = reverse ? file.size - CHUNK_SIZE : 0;
	            let end = reverse ? file.size : CHUNK_SIZE;
	            let slice = file.slice(start, end);
	            fr.readAsArrayBuffer(slice);
	        }
	    }
		
		function toJson() {
			var array = [].slice.call(bloom.buckets),
			    json = JSON.stringify(array);
			return json
		}
		
		function saveToFile() {
			var textFileAsBlob = new Blob([toJson()], {type:'text/plain'});
			var downloadLink = document.createElement("a");
			downloadLink.download = 'test.txt';
			downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
			downloadLink.click();
		}
		async function getFileHandle() {
			const opts = {
				type: 'save-file',
				accepts: [{
					description: 'Text file',
					
					extensions: ['txt'],
					
					mimeTypes: ['text/plain'],
			    }],
			}
			// 参考链接 https://wicg.github.io/entries-api/ chooseFileSystemEntries方法浏览器未发布
			fileHandle = await window.chooseFileSystemEntries(opts);			
		}
		async function wirteToFile(txt) {
			if (!fileHandle) {
				return
			}
			const writable = await fileHandle.createWritable();
			await writable.write(txt);
			await writable.close()
		}
	</script>
</html>

失败如我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器如何处理大数据量的文件？

问题描述：最近有个需求需要对超过1G的文件进行处理，例如生成布隆过滤器文件等，由于文件是在本地，需要本地上传到服务端去处理，由于数据量比较大，对网络的压力比较大，所以考虑是否可以在本地进行处理完然后再上传。注：处理完的数据比较小，约几十M解题方法：本地处理的方法如下：1. 提供一个本地的数据处理小工具(与语言无关)，然后处理完成的数据进行上传；2. 通过浏览期进行处理，处理完然后上传；对比1和2, 其中1实现比较简单，但是需要兼容多种系统，同时用户使用有成本，所以选用2方式实现，2只需要
复制链接

扫一扫