一、基础概念
- Blob: 前端的一个专门用于支持文件操作的二进制对象
- ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同
- Buffer:Node.js提供的一个二进制缓冲区,常用来处理I/O操作
https://zhuanlan.zhihu.com/p/97768916
二、整体思路
- File,通过slice,切片成Blob块;
- FileReader,异步读取每片Blob,readAsArrayBuffer;
- 使用支持增量追加和ArrayBuffer的摘要算法库进行逐片计算追加摘要。
三、好处
全程arraybuffer,从二进制缓冲区读取,不读入到js数组和字符串 ,保证读取速度;
分片增量追加,分多次追加,而不是单词处理超级大内容,保证低内存消耗;
sha256,安全摘要算法,比MD5更安全;
四、代码示例
五、摘要算法库选型
名称 | arrayBuffer支持 | 追加支持 | npm地址 |
spark-md5 | 支持 | 是 | https://www.npmjs.com/package/spark-md5 |
crypto-js/sha256 | 否,支持crypto定义的wordArray类型 | 否 | https://www.npmjs.com/package/crypto-js |
sha.js | 否,支持buffer,对nodejs友好 | 是 | https://www.npmjs.com/package/sha.js |
js-sha256 | 是 | 是 | https://www.npmjs.com/package/js-sha256 |
sha3-js | 是 | 是 | https://www.npmjs.com/package/js-sha3 |
六、推荐
js-sha256+分片fileReader读arraBuffer组合。
参考
- html5 - javascript FileReader - parsing long file in chunks - Stack Overflow
- File | MDN
- Streams API | MDN
- WritableStream | MDN
- A Guide to Faster Web App I/O and Data Operations with Streams - Blog | SitePen
- ArrayBuffer - ECMAScript 6入门
- Streams Standard
- The Basics of Web Workers - HTML5 Rocks
- WEB WORKER配合FILE API,加速前端秒传读取MD5
- node如何实现大文件上传
- HTML5 File API 配合 Web Worker 计算大文件 SHA3 Hash 值