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

最新推荐文章于 2025-06-23 20:18:05 发布

前端薛之谦...

最新推荐文章于 2025-06-23 20:18:05 发布

阅读量1.4w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： node js 文章标签： node 文件的读取异步操作封装 readfile FileReader

本文链接：https://blog.youkuaiyun.com/weixin_41105030/article/details/85529681

本文介绍了JS使用FileReader对象异步读取文件的详细过程，包括事件处理、基本使用方法如readAsArrayBuffer、readAsDataURL和readAsText。同时，对比了浏览器环境下JavaScript与Node.js中读取文件的差异，强调了Node.js的fs模块读取文件的异步性质，并展示了使用Promise处理异步操作的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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结构

<input type="file" multiple>

JS调用

<script>
	window.onload = function(){
   
   
		var inpFile = document.querySelector('input[type=file]')
		inpFile.addEventListener('change', function(){
   
   
			var reader = new FileReader()
			// 发送异步请求
			// 0.使用readAsText方法（读取结果普通文本）
			reader.readAsText(this.files[0]) 
			// 读取成功的结果：已经成功读取文件（计算机上的文件read.txt）
			reader.onload = function(){
   
   
    		//读取完成后，数据保存在对象的result属性中
    		console.log(this.result)//打印：已经成功读取文件
  			}
		})