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()。
实际应用:图片上传预览和图片裁剪预览