一、场景说明
这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区,再阅读右侧代码,最后尝试底部练习。
学习重点:不要只复制代码,要观察“数据 → 状态 → 渲染 → 事件”的关系。
二、可运行演示
三、知识点提醒
- File API 可以读取文件名、大小、类型等信息。
- 预览图片可用 `URL.createObjectURL(file)`。
- 不再需要预览地址时可以 `URL.revokeObjectURL()` 释放资源。
四、练习建议
- 增加多图上传预览。
- 限制图片宽高,例如宽度至少 1200px。