原生js使用FileReader将文件转成base64

一、FileReader介绍

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

File对象可以是来自用户在一个type类型为file的input元素上选择文件后返回的FileList对象。

<input type="file" name="" id="">

注意： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容，它不能用于从文件系统中直接使用路径名简单地读取文件。

二、FileReader的使用

FileReader是一个构造函数，需要new之后拿到FileReader的实例。

  var reader = new FileReader();

实例的方法：
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);        // 解析后的数据，如下图
    }

}

base64

obtn.onclick = function(){

    var reader = new FileReader();
    reader.readAsArrayBuffer(f.files[0]);    // 解析成ArrayBuffer格式
    reader.onload = function () { 
        console.log(this.result);            // 解析后的数据，如下图
    }

}

ArrayBuffere

obtn.onclick = function(){

    var reader = new FileReader();
    reader.readAsText(f.files[0]);    // 解析成Text格式
    reader.onload = function () { 
        console.log(this.result);            // 解析后的数据，如下图
    }

}

readAsText

以上，如有错误，请留言交流...

最后编辑于：2020.09.28 10:57:41