耀极客论坛

 找回密码
 立即注册
查看: 3081|回复: 0

使用JS操作文件(FileReader读取--node的fs)

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 02:25:04 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了使用JS操作文件(FileReader读取--node的fs),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

JS读取文件 FileReader
  FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

文档
  FileReader

事件和方法
  事件处理
FileReader.onabort            处理abort事件。该事件在读取操作被中断时触发。                                    FileReader.onerror            处理error事件。该事件在读取操作发生错误时触发。                            FileReader.onload            处理load事件。该事件在读取操作完成时触发。                            FileReader.onloadstart            处理loadstart事件。该事件在读取操作开始时触发。                            FileReader.onloadend            处理loadend事件。该事件在读取操作结束时(要么成功,要么失败)触发。                            FileReader.onprogress            处理error事件。该事件在读取操作发生错误时触发。  标准方法
       
  • FileReader.abort()
  中止读取操作。在返回时,readyState属性为DONE。
       
  • FileReader.readAsArrayBuffer()
  开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
       
  • FileReader.readAsDataURL()
  开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
       
  • FileReader.readAsText()
  开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个字符串以表示所读取的文件内容。

基本使用
  文件的准备read.txt(随便读取电脑的文件都可以)

  HTML结构
  1. ‹input type="file" multiple>
复制代码
  JS调用
  1. ‹script>
  2. window.onload = function(){
  3. var inpFile = document.querySelector('input[type=file]')
  4. inpFile.addEventListener('change', function(){
  5. var reader = new FileReader()
  6. // 发送异步请求
  7. // 0.使用readAsText方法(读取结果普通文本)
  8. reader.readAsText(this.files[0])
  9. // 读取成功的结果:已经成功读取文件(计算机上的文件read.txt)
  10. reader.onload = function(){
  11.     //读取完成后,数据保存在对象的result属性中
  12.     console.log(this.result)//打印:已经成功读取文件
  13.   }
  14. })
  15. }
  16. ‹/script>
复制代码
  JS调用使用其它方法(其它方法也是一样使用)
  readAsDataURL
  1. window.onload = function(){
  2. var inpFile = document.querySelector('input[type=file]')
  3. inpFile.addEventListener('change', function(){
  4. var reader = new FileReader()
  5. // 使用readAsDataURL(获取base64编码)
  6. reader.readAsDataURL(this.files[0])
  7. reader.onload = function(){
  8.     console.log(this.result)
  9.     //data:text/plain;base64,5bey57uP5oiQ5Yqf6K+75Y+W5paH5Lu2
  10.   }
  11. })
  12. }
复制代码
事件处理
  JS调用(还是使用上面的html和文件–或则准备更大的文件;效果会更好)
  1. window.onload = function(){
  2. var inpFile = document.querySelector('input[type=file]')
  3. inpFile.addEventListener('change', function(){
  4. var reader = new FileReader()
  5. reader.readAsText(this.files[0])
  6. var count = 0;
  7. reader.onloadstart = function(){
  8. console.log("onloadstart状态"+this.readyState)
  9.     console.log("开始加载")
  10.   }
  11.   reader.onloadend= function(){
  12.   console.log("onloadend状态"+this.readyState)
  13.     console.log("加载结束")
  14.   }
  15.   reader.onprogress = function(){
  16.   count++;
  17.   console.log("onprogress状态"+this.readyState)
  18.     console.log("加载中"+count)
  19.   }
  20. reader.onload = function(){
  21.     console.log("onload拿到的数据为"+this.result)
  22.     console.log("状态"+this.readyState)
  23.   }
  24.   reader.onerror = function(){
  25.     console.log('出错了')
  26.   }
  27.   reader.onerror = function(){
  28.     console.log('处理abort事件。该事件在读取操作被中断时触发。')
  29.   }
  30. })
  31. }
复制代码
  结果如下

  重要结果分析:
       
  • 状态1(readyState):数据正在被加载   
  • 状态2:已完成全部的读取请求.   
  • 当然状态为0(readyState)表示还没有加载任何数据.   
  • 每过50ms左右,就会触发一次progress事件;也就是说这个可能多次触发,onload事件在onloadend之前触发。   
  • 由于种种原因无法读取文件时,会触发error事件。触发error事件时,相关信息保存在FileReader对象的error属性中,这个属性将保存一个对象,此对象只有一个属性code,即错误码。1表示未找到文件,2表示安全性错误,3表示读取中断,4表示文件不可读,5表示编码错误。   
  • 如果想中断读取过程,可以调用abort方法,就会触发abort事件。在返回时,readyState属性为DONE。一般用于后台的操作。

node操作文件(readfile)
  根据以上可知,浏览器中的 JavaScript 是没有文件操作的能力的(基于安全,不能直接操作本地文件),但是 Node 中的 JavaScript 具有文件操作的能力
  node怎么读取文件(安装node可以直接忽略看代码)
       
  • 首先要安装node环境(很简单,网上很多教程),最好也安装nodemon   
  • 打开你的cmd,也可以使用git   
  • 创建JS文件   
  • 加载node的核心模块   
  • 使用readFile   
  • 在cmd输入node 文件名.js
  1. // 1. 使用 require 方法加载 fs 核心模块
  2. var fs = require('fs')
  3. // 2. 读取文件
  4. //    第一个参数就是要读取的文件路径
  5. //    第二个参数是一个回调函数
  6. //        成功
  7. //          data 数据
  8. //          error null
  9. //        失败
  10. //          data undefined没有数据
  11. //          error 错误对象
  12. fs.readFile('read.txt', function (error, data) {
  13.   // 在这里就可以通过判断 error 来确认是否有错误发生
  14.   if (error) {
  15.     console.log('读取文件失败了')
  16.   } else {
  17.     console.log(data.toString())
  18.   }
  19. })
复制代码
  结果


文件读取是一个异步操作
  当我们读取多个文件,发现使用readfile读取文件并不能一定按顺序打印结果,所以这是一个异步操作,如何顺序读取文件。

使用Promise
  1. var fs = require('fs')
  2. function pReadFile(filePath) {
  3.   return new Promise(function (resolve, reject) {
  4.     fs.readFile(filePath, 'utf8', function (err, data) {
  5.       if (err) {
  6.         reject(err)
  7.       } else {
  8.         resolve(data)
  9.       }
  10.     })
  11.   })
  12. }
  13. pReadFile('./data/a.txt')
  14.   .then(function (data) {
  15.     console.log(data)
  16.     return pReadFile('./data/b.txt')
  17.   })
  18.   .then(function (data) {
  19.     console.log(data)
  20.     return pReadFile('./data/c.txt')
  21.   })
  22.   .then(function (data) {
  23.     console.log(data)
  24.   })
复制代码
文件的写入
  1. fs.writeFile('read.txt', '大家好,给大家介绍一下,我是文件写入', function (error) {
  2.   if (error) {
  3.     console.log('写入失败')
  4.   } else {
  5.     console.log('写入成功了')
  6.   }
  7. })
复制代码
  以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 19:03 , Processed in 0.068856 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表