只需监听文件输入框的change事件，用FileReader读取图片并设为img标签src即可实现本地预览：设置accept="image/*"，获取files[0]，校验类型后调用readAsDataURL()，在onload中将reader.result赋值给img.src。
只需监听文件输入框的变更事件，用 FileReader 读取选中的图片文件，并将结果设为 src，就能实现本地图片的即时预览。
绑定文件选择事件
给 添加 change 事件监听器，确保只接受图片类型：
- 设置
accept="image/*"属性，限制用户只能选择图片文件 - 在事件回调中获取
event.target.files[0]，即第一个选中的文件对象 - 检查文件是否存在且类型是否匹配（如
file.type.startsWith('image/')）
使用FileReader读取文件内容
创建 FileReader 实例，调用 readAsDataURL() 方法将图片转为 Base64 数据 URL：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 监听
onload事件，在读取成功后获取reader.result - 该结果是形如
data:image/png;base64,...的字符串，可直接赋值给 - 可选：监听
onerror处理读取失败（如文件过大或权限问题）
更新页面显示预览图
准备一个
- 建议提前在 HTML 中写好
- 在 FileReader 的
onload回调中执行document.getElementById('preview').src = reader.result - 可配合 CSS 控制尺寸和边框，提升预览体验（如
max-width: 100%; height: auto;）
补充优化点
让功能更健壮、用户体验更自然：
- 选择新文件时清空上一次预览，避免残留（如设置
img.src = ''） - 支持多图预览？可用
for...of遍历files，动态创建多个 - 大图加载慢？可先显示加载状态（如文字提示或 loading 动画）
- 移动端注意：部分 iOS 系统对
input[type=file]支持有限，建议测试真机效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
