原生JS读写文件

蛤?还有这种操作?

我一直以为读写本地文件只有node能实现,但是昨天搞了一个chrome浏览器的拓展应用,不能使用node(可以运行node,但是不能读写文件,那还用毛node),直接用原生js干凿,但是我要实现的功能就是要读写文件,我陷入了沉思。。这咋弄,老师也没教过啊。

第一步,获取数据

js如何获取数据流呢?我用的是 input 标签,input标签当 type=“file” 时就可以上传文件,当你上传了文件后,此时的 input 元素实例上就可以拿到 名为files 的类数组对象,你发现它只有一项,那就是我们要获取的数据流(blob对象)。

关于怎么拿到files对象,你可以通过元素实例拿到,也可以通过input标签的onchange事件对象(e.target.files[0])get到。那么问题来了,对于这个看得见摸不着的thing我们该怎么读取或者解析呢?百度一下你就知道。

第二步,读取数据

于是百度了一发,发现h5提供了读写文件的API——FIleReader,然后根据MDN 提供的文档了解了一下,用到的知识不多

  • FileReader 是一个构造函数,调用的时候要使用new关键字生成一个实例
  • FileReader 有几个读取文件的方法,每个方法决定了输出的数据格式
  • FileReader 有几个事件,我只用到了onload,回调函数里的参数是读取成功后的数据,数据的格式取决于上面你读取的方式

第三步,保存数据

这是关键的一步,看网上好多人使用一个工具FileSaver.js(包含了读取数据,保存数据,星星还是挺多的)。我看了一下代码,一百多行,我就不在这里解读了。我偷懒,直接用了,有一点要注意,要保存成一个json数据格式的文件,还是要使用 new File(),然后把这个 file 格式的数据传给FileSaver,这样保存的文件打开后才能是正确格式的json数据,其他方式也能生成文件,但是打开后格式是错的,json变成了json string。网上好多文章说的都是错的,还是自己动手,丰衣足食。

你可能感兴趣的:(原生JS读写文件)