filereader.readasdataurl可异步将图片转base64实现本地预览：监听input change事件，校验图片类型与大小，新建filereader实例，在onload回调中赋值src；注意避免复用实例、异步取值错误及ios渲染延迟。
直接用 FileReader.readAsDataURL 可以把用户选中的图片文件异步转成 Base64 字符串，再赋值给 <img> 的 src 就能实时预览，无需上传服务器。
监听文件选择并读取
给 <input type="file"> 绑定 change 事件，拿到 files[0]（确保只处理单图），然后创建 FileReader 实例：
- 调用
reader.readAsDataURL(file)启动读取 - 监听
reader.onload，此时reader.result就是完整的 Base64 数据 URL（形如data:image/png;base64,...） - 把
reader.result赋给图片元素的src属性即可显示
注意文件类型和大小限制
不是所有文件都适合预览：
- 建议先检查
file.type.startsWith('image/')，过滤非图片类型 - 大图（比如 >5MB）可能导致内存占用高或读取卡顿，可加大小判断，例如
if (file.size > 5 * 1024 * 1024) { alert('图片太大'); return; } - 部分浏览器对超长 Base64 字符串渲染有性能影响，预览仅用于临时查看，不建议长期保留大量 Base64 数据
避免常见坑
几个容易出错的地方：
-
reader.onload是异步的，不能在readAsDataURL后立刻取result—— 必须在回调里用 - 不要重复使用同一个
FileReader实例，每次选新文件都要新建一个 - 如果用户连续快速选两次文件，前一次的
onload可能覆盖后一次结果，可用reader.abort()或加标识位控制 - 移动端 iOS Safari 对 Data URL 渲染偶有延迟，可加
img.onload = () => { img.style.opacity = 1; }避免闪白
简单示例代码
HTML：
JS：
const input = document.getElementById('fileInput');
const img = document.getElementById('preview');
input.addEventListener('change', e => {
if (!e.target.files.length) return;
const file = e.target.files[0];
if (!file.type.startsWith('image/')) return;
const reader = new FileReader();
reader.onload = () => {
img.src = reader.result;
};
reader.readAsDataURL(file);
});
