对于JavaScript 的 FileReader，你了解多少？

你是否曾遇到过需要在网页上处理用户上传的文件的情况？习惯了使用已经封装好的 UI 组件库（ant ui、element ui），你是否曾遇到过需要手写代码实现？或者想过如何将图片以一种更巧妙的方式呈现在你的应用中？那么不妨了解下 JavaScript 的 FileReader！

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。在这篇文章中，我们将研究下 FileReader 的方法和事件，通过一个实际的开发示例，彻底了解这个异步文件操作的威力。

1. FileReader方法：开启异步文件之旅

首先，我们要创建一个FileReader实例，就像打开了通往异步文件操作的大门：

const reader = new FileReader();

接下来，让我们一探FileReader提供的神秘方法：

• readAsArrayBuffer(file): 按字节读取文件内容，得到的是一个ArrayBuffer对象。
• readAsBinaryString(file): 以二进制串形式读取文件内容。
• readAsDataURL(file): 以data:url的字符串形式输出，将文件内容进行base64编码。
• readAsText(file, encoding): 以字符串形式读取文件内容。
• abort(): 紧急终止文件读取操作。

2. FileReader事件：情感丰富的文件操作

FileReader触发的事件如同一场精彩的表演，每个事件都有其独特的角色：

• onloadstart: 读取操作开始的欢呼声。
• onprogress: 在读取数据过程中的持续心跳，用于实现优雅的进度条。
• onabort: 当读取操作被突然叫停时的悲壮告别。
• onerror: 读取操作发生错误时的紧张时刻，错误信息都躲在FileReader对象的error属性中。
• onload: 读取操作成功完成，犹如一场胜利的庆祝。
• onloadend: 读取操作的终极告别，无论是成功、失败还是取消。

3. 代码操作：掌握神奇的base64转换

让我们通过一个实际的代码示例，感受一下如何利用FileReader将图片转换为base64：

function imgChange(e) {
    if (e.files.length !== 0) {
        const reader = new FileReader();
        if (!reader) {
            e.value = '';
            return;
        }

        reader.onload = function (ev) {
            const result = ev.target.result; // 图片base64
            // 在这里可以进行对base64图片的魔法处理
        };

        reader.readAsDataURL(e.files[0]);
    }
}

4. 开发实例：图片转base64，激发你的创造力

FileReader在处理图片上传中大放异彩，转译为base64的处理方式为前端开发带来了更多的创意空间。想要深入了解如何处理图片的大小、进行图片压缩，以及高效地完成图片上传？

大家可以看看这个《前端实战分享，图片处理神器全面解析（base64、大小判断、压缩、上传）》。

总结

文章介绍了 FileReader 的方法、事件以及实际应用场景。在处理文件上传时，FileReader为开发者提供了强大而灵活的工具，能够异步读取文件内容并在不同阶段触发相应事件。