input[type="file"]选中后无法获取真实路径，只能通过event.target.files[0]获取file对象，再用url.createobjecturl()生成临时blob url用于预览，使用后需调用url.revokeobjecturl()释放内存。
input type="file" 选中后怎么立刻拿到图片路径
浏览器出于安全限制，input[type="file"] 的 value 只返回文件名（如 C:\fakepath\photo.jpg），无法直接读取本地真实路径。真正能用的只有 files 属性返回的 FileList 对象——它包含 File 实例，可用 URL.createObjectURL() 生成临时可访问的 blob URL。
常见错误是试图用 file.path 或 file.fullPath（仅在 Chrome 扩展里可用）；也别对 input.value 做字符串截取，那不可靠且跨浏览器不一致。
- 监听
input的change事件，而非click - 检查
event.target.files.length > 0，避免空选择报错 - 用
URL.createObjectURL(event.target.files[0])得到预览地址，记得后续调用URL.revokeObjectURL()释放内存（尤其在频繁更换文件时）
preview 图片显示不出来？检查 src 是否被设成 file 对象
典型错误写法：img.src = event.target.files[0] —— File 对象不能直接当 URL 用，浏览器会静默失败，控制台也不报错。必须经 createObjectURL 转换。
另一个易忽略点：如果页面用了 CSP（Content Security Policy），需确保 blob: 协议被允许，否则 Chrome/Firefox 会拦截加载，控制台报 Refused to load the image because it violates the following Content Security Policy directive。
- 正确赋值：
img.src = URL.createObjectURL(file) - 预览前清空旧
src（比如设为''），防止上一个 blob URL 残留导致显示异常 - 单图预览场景下，每次新选文件前先
URL.revokeObjectURL(oldSrc)，否则内存泄漏
支持多图预览但只显示第一张？别漏掉循环处理 files
event.target.files 是类数组，不是数组，不能直接用 forEach。若想批量预览，得先转成数组或用 for 循环遍历。
另外，DOM 插入逻辑容易出错：比如反复 innerHTML += <img> 会重绘全部节点，性能差；或者没清空容器，导致重复叠加。
- 推荐写法：
Array.from(event.target.files).forEach(file => { ... }) - 每张图都调用一次
URL.createObjectURL(file)，各自独立 - 用
document.createElement('img')+container.appendChild()，比拼接字符串更可控 - 多图场景下，务必在渲染前清空容器（如
container.innerHTML = ''），否则历史预览残留
上传前校验图片类型和大小，别全靠后端兜底
前端校验不是为了替代后端，而是提升用户体验和减少无效请求。用户选了 2GB 视频却以为能上传，等十几秒才提示“文件太大”，体验极差。
File 对象有 type（MIME）、size（字节）属性，可立即读取。注意 file.type 可能为空（比如拖拽上传的 .jpg 文件），此时需 fallback 到扩展名判断，但不要仅依赖扩展名——它可被轻易伪造。
- 限制图片类型：
file.type.startsWith('image/')比file.name.endsWith('.jpg')更可靠 - 大小检查：
if (file.size > 5 * 1024 * 1024) { alert('请上传小于 5MB 的图片'); return; } - 校验失败时，主动清空
input.value = ''，否则下次触发change事件会被跳过（因为 value 没变）
实际做下来，最常卡住的地方不是语法，而是忘记 revokeObjectURL 导致内存缓慢增长，或者在 CSP 环境下没加 blob: 白名单。这两处不报错，但预览就是不动，排查起来特别花时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
