只需监听文件输入框的change事件，用FileReader读取图片并设为img标签src即可实现本地预览：设置accept="image/*"，获取files[0]，校验类型后调用readAsDataURL()，在onload中将reader.result赋值给img.src。
只需监听文件输入框的变更事件，用 FileReader 读取选中的图片文件，并将结果设为 <img> 标签的 src，就能实现本地图片的即时预览。
绑定文件选择事件
给 <input type="file"> 添加 change 事件监听器，确保只接受图片类型：
- 设置
accept="image/*"属性，限制用户只能选择图片文件 - 在事件回调中获取
event.target.files[0]，即第一个选中的文件对象 - 检查文件是否存在且类型是否匹配（如
file.type.startsWith('image/')）
使用FileReader读取文件内容
创建 FileReader 实例，调用 readAsDataURL() 方法将图片转为 Base64 数据 URL：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听
onload事件，在读取成功后获取reader.result - 该结果是形如
data:image/png;base64,...的字符串，可直接赋值给<img src> - 可选：监听
onerror处理读取失败（如文件过大或权限问题）
更新页面显示预览图
准备一个 <img> 标签用于展示，无需额外服务器请求：
立即学习“前端免费学习笔记（深入）”；
- 建议提前在 HTML 中写好
<img id="preview" alt="预览图"> - 在 FileReader 的
onload回调中执行document.getElementById('preview').src = reader.result - 可配合 CSS 控制尺寸和边框，提升预览体验（如
max-width: 100%; height: auto;）
补充优化点
让功能更健壮、用户体验更自然：
- 选择新文件时清空上一次预览，避免残留（如设置
img.src = ''） - 支持多图预览？可用
for...of遍历files，动态创建多个<img> - 大图加载慢？可先显示加载状态（如文字提示或 loading 动画）
- 移动端注意：部分 iOS 系统对
input[type=file]支持有限，建议测试真机效果
