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

问题描述: 最近有个需求需要对超过1G的文件进行处理,例如生成布隆过滤器文件等,由于文件是在本地,需要本地上传到服务端去处理,由

问题描述:

最近有个需求需要对超过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/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/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>

发布者:admin,转转请注明出处:http://www.yc00.com/web/1742570838a4460399.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信