Mikel
来源： 原生js使用FileReader将文件转成base64_js filereader base64-CSDN博客
一、FileReader介绍
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。可以使用File对象指定要读取的文件。
File对象可以是来自用户在一个type类型为file的input元素上选择文件后返回的FileList对象。
<input type=”file” name=”” id=””>
注意： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容，它不能用于从文件系统中直接使用路径名简单地读取文件。
二、FileReader的使用
FileReader是一个构造函数，需要new之后拿到FileReader的实例。
var reader = new FileReader();
1
实例的方法：
reader.abort()：中止读取操作。
reader.readAsArrayBuffer()：读取完成后，触发onload事件，result 属性中保存的是文件的 ArrayBuffer 数据对象。
reader.readAsDataURL()：读取完成后，触发onload事件，result属性中保存的是Base64文件内容。
reader.readAsText()：读取完成后，触发onload事件，result属性中保存的是字符串文件内容。
实例的事件：
reader.onabort：在读取操作被中断时触发。
reader.onerror：在读取操作发生错误时触发。
reader.onload：在读取操作完成时触发。
reader.onloadstart：在读取操作开始时触发。
reader.onloadend：在读取操作结束时（要么成功，要么失败）触发。
实例的属性：
reader.error：返回读取文件时的错误信息
reader.readyState：表示FileReader状态的数字。0:还没有加载；1:正在加载；2:加载完成
reader.result：文件的内容
三、使用范例
obtn.onclick = function(){
var reader = new FileReader();
reader.readAsDataURL(f.files[0]); // 解析成base64格式
reader.onload = function () {
console.log(this.result); // 解析后的数据，如下图
}
}
obtn.onclick = function(){
var reader = new FileReader();
reader.readAsArrayBuffer(f.files[0]);// 解析成ArrayBuffer格式
reader.onload = function () {
console.log(this.result); // 解析后的数据，如下图
}
}
obtn.onclick = function(){
var reader = new FileReader();
reader.readAsText(f.files[0]); // 解析成Text格式
reader.onload = function () {
console.log(this.result); // 解析后的数据，如下图
}
}
以上，如有错误，请留言交流…
————————————————
版权声明：本文为CSDN博主「杨树林er」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41636483/article/details/112589158
