问题描述：
最近有个需求需要对超过1G的文件进行处理，例如生成布隆过滤器文件等，由于文件是在本地，需要本地上传到服务端去处理，由于数据量比较大，对网络的压力比较大，所以考虑是否可以在本地进行处理完然后再上传。
注： 处理完的数据比较小，约几十M
解题方法：
本地处理的方法如下：
1. 提供一个本地的数据处理小工具(与语言无关)，然后处理完成的数据进行上传；
2. 通过浏览期进行处理，处理完然后上传；
对比1和2, 其中1实现比较简单，但是需要兼容多种系统，同时用户使用有成本，所以选用2方式实现，2只需要用户使用浏览器就可以
浏览器的web api提供了FileReader对象，允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
由于数据量比较大，采用异步读取的方式，每次读取固定的大小的文件，通过readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。具体见illa/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="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 = ''
ElementById('bloom-filter').onclick = function () {
let file = ElementById('file').files[0];
let fr = new FileReader();
let CHUNK_SIZE = 10 * 1024;
let startTime, endTime;
let reverse = false;
fr.onload = function () {
let buffer = new sult);
let txt = new TextDecoder('utf-8').decode(buffer.slice())
let arr = txt.split(/[(rn)rn]+/);
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 = ateElement("a");
downloadLink.download = &#';
downloadLink.href = ateObjectURL(textFileAsBlob);
downloadLink.click();
}
async function getFileHandle() {
const opts = {
type: 'save-file',
accepts: [{
description: 'Text file',
extensions: ['txt'],
mimeTypes: ['text/plain'],
}],
}
// 参考链接 wicg.github.io/entries-api/ chooseFileSystemEntries方法浏览器未发布
fileHandle = await window.chooseFileSystemEntries(opts);
}
async function wirteToFile(txt) {
if (!fileHandle) {
return
}
const writable = ateWritable();
await writable.write(txt);
await writable.close()
}
</script>
</html>本文发布于:2025-03-21 23:27:00，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/1742570840582946.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
