FileReader对象详解

FileReader 是浏览器提供的 JavaScript API，用于异步读取用户计算机上的文件内容（如文本、图像等）。它是处理文件上传和预览的核心工具之一。

基本用法

1. 创建 FileReader 实例

const reader = new FileReader();

2. 主要读取方法

方法	描述	结果类型
readAsText(file)	读取为文本	string
readAsDataURL(file)	读取为Base64数据URL	string (data: URL)
readAsArrayBuffer(file)	读取为二进制缓冲区	ArrayBuffer
readAsBinaryString(file)	读取为二进制字符串 (已废弃)	string

3. 事件处理

事件	触发时机
onload	读取成功完成时
onprogress	读取过程中周期性触发
onerror	读取失败时
onabort	读取被中止时

file对象的type属性获取文件类型。1.使用startsWith()方法判断是否有‘image/’开头。如果是图片返回true。2.通过文件扩展名来判断，filename.split(',').pop().toLowerCase()。

实际应用：图片上传预览和图片裁剪预览