FileReader()在js中的使用

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

生成FileReader对象

// 生成FileReader对象
var fileR = new FileReader();

FileReader的属性

fileR.error;// 表示在读取文件时发生的错误
fileR.result;// 该属性仅在读取完成后才有效，表示读取的文件内容

FileReader对象的方法

// FileReader对象的方法
fileR.abort(); // 参数为none,用于中段读取
fileR.readAsDataURL(file);// 参数为要读取的文件，用于将文件读取为URL格式的Base64字符串
fileR.readAsText(file);// 参数为要读取的文件，用于将文件读取为文本
fileR.readAsBinaryString(file);// 参数为要读取的文件，用于将文件读取为二进制码
fileR.readAsArrayBuffer(file);// 参数为要读取的文件，用于将文件读取为ArrayBuffer的数据对象

FileReader的事件

fileR.onabort();// 在读取操作被中断时触发
fileR.onerror();// 在读取操作发生错误时触发
fileR.onload();// 在读取操作完成时触发
fileR.onloadstart();// 在读取操作开始时触发
fileR.onloadend();// 在读取操作结束时触发（无论失败或成功）
fileR.onprogress();// 在读取Blob时触发

// 案例
<input  type='file' id='myFile'>

<script>
	var myFile=document.querySelector('#myFile');
	function fn(res){
		var fileR = new FileReader();
		fileR.readAsDataURL(myFile);
		fileR.onload = (event)=>{
			var img = new Image();
			img.src = fileR.result;
			document.boay.appendChild(img);
		}
	}
</script>