上传前预览的核心是「不提交、只展示」，必须用 url.createobjecturl() 实现即时预览，监听 input 事件，及时 revoke 旧 url 防内存泄漏，并确保表单结构完整。
上传前预览的核心是「不提交、只展示」，所有预览行为必须在用户触发选择后立即完成，且不能依赖后端响应。
用 URL.createObjectURL() 做图片/视频/音频即时预览
这是最轻量、性能最好的方式：浏览器为 File 对象生成一个临时内存 URL，可直接赋给 <img src>、<video src></video> 等。它不解析文件内容，也不转成 Base64，适合大文件。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须监听
input事件（不是change），避免失焦延迟导致预览滞后 - 每次新选文件前，先调用
URL.revokeObjectURL(img.src)清掉旧 URL，否则内存持续增长 -
URL.createObjectURL()生成的 URL 只在当前页面生命周期有效，刷新即失效，不能存到 localStorage 或发给后端 - 不要只信
accept="image/*"—— 用户能手动改扩展名绕过，务必用file.type.startsWith('image/')或正则校验
多文件预览要动态创建 DOM 元素
单个 <img> 标签只能显示一张图；多文件需遍历 input.files，为每个合法文件生成独立的预览容器（如 <div class="preview-item">
<img><span>xxx.jpg</span>
</div>）。
- 每次触发
input事件时，先清空旧预览区域（container.innerHTML = ''），再重新渲染，避免重复叠加 - 为每个预览项绑定删除按钮，点击时从 DOM 移除对应元素，并调用
URL.revokeObjectURL()释放内存 - 若需支持拖拽上传，必须同时监听
dragover和drop事件，并阻止默认行为，否则浏览器会打开文件
预览 ≠ 提交，表单结构不能被破坏
预览只是视觉反馈，原始 <form></form> 必须保持完整：保留 enctype="multipart/form-data"、name 属性、type="file" 输入框本身，否则提交时后端收不到文件。
- 别把
input[type="file"]的value清空或设为只读——它只读，且清空会丢失用户选择 - 预览模态框里的“确认提交”按钮，应通过
form="myform"属性关联原始表单，而不是克隆或重写<form></form> - 如果要做压缩或裁剪（比如强制缩到 800px 宽），不能靠 CSS
width控制显示大小——那只是视觉欺骗，原始文件仍按原尺寸上传
真正容易被忽略的是内存管理：每调一次 URL.createObjectURL() 就占一块内存，不 revoke 就永远不释放，尤其在频繁换图、多图预览场景下，几分钟就可能卡死页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
