对HTML5 File 对象的读写组件编写

最近几天在项目里面要在前端对文件进行加密操作之后再上传到后端，需要先从File对象中读出数据进行加密然后再生成一个新的File对象，自然就要用到 HTML5 的 FileReader 来处理。之前也写过一个分块读文件的组件，但是回去读了一下代码觉得设计的很不好，本来应该用单例却硬生生用了一个class，而且还仅仅只有读文件的操作，没有写文件。

去npm上看了一下，好像也没有完全符合需求的组件，没办法，就自己写了一个，现在放到npm上面去了。

github: https://github.com/sallerli1/html5-file-js
npm: https://www.npmjs.com/package/html5-file-js

安装

npm install html5-file-js

使用

具体的用法在ReadMe中都有写到，就不废话了。

思路分享

大部分代码都还是很简单的就一一拿出来说了，分享一下自己的学习成果吧

readChucks 的链式读取

这个链式读取主要是对Blob对象进行分割，利用闭包保存当前的读取进度和下一步需要分割的起点，在FileReader的 onload 事件中判断是否需要读取完成，未完成则继续分割下一部分进行读取。在代码中完全舍弃掉了 onerror 事件来处理异常的方法，而是将 FileReader 的error属性传入回掉函数进行处理，在外部调用就变得简单了很多，内部也少了不少代码，但是没有具体测试，不知道会发生什么不可预测的问题。

promisify

这回写的组件全部提供了 promisified 的调用方法，说来也很简单，就是返回一个 Promise 对象，在回调函数中判断如果没有异常则 resolve，有异常就 reject。（突然想起来前段时间面试官问我Promise有几种状态，明明有3中我却说了两种，面试官还没提出质疑，太给面子了）这样的好处当然很多，书写简单且易维护，还能避免由于异步执行而产生的错误。

写入File

现在只支持写入一个字符串或者写入一个 ArrayBuffer。
写字符串比较简单，读出原来File中的字符串然后拼接起来再 new 一个 File 对象就好了（new 了无数个对象了，就是没有对象！！！）。
写 ArrayBuffer 就要读出原来 File 中的 buffer，对两个 buffer 都取一个 Uint8Array 的 TypedArray，然后针对这两个buffer的长度新建一个ArrayBuffer，再前后把两个 buffer 写进去再 new 一个 File 对象（实在不想多写字了）

待解决的问题

分段读取文件为字符串时编码问题

分段读取文件的时候总是有可能从某一个字符中间切分开，而每一小段数据又会单独运行回调函数，就导致了在段尾出现乱码的问题，由于本人对编码了解实在太少，尚不能得出一个有效的解决办法。

还没有引入 Worker

考虑到文件的读写实际上是很消耗资源的操作，最好是使用 Worker 多线程进行处理，但是实测过，如果没有对文件进行加密等复杂操作，只是读取文件，读取的速度比起DOM操作的速度可是能快上100倍以上，而Worker又不能解决DOM操作速度的问题，就先没有引入Worker。