问题描述:
最近有个需求需要对超过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条)