直接用FileReader读取拖入的File对象，调用readAsDataURL()转base64 URL并赋值给即可实时预览；关键在于正确遍历FileList、为每个File单独创建FileReader实例、并在onload中用reader.result更新对应图片。
拖拽图片文件后怎么立刻显示预览？
直接用 FileReader 读取拖入的 File 对象，调用 readAsDataURL() 转成 base64 URL，再赋给 src 属性即可实时预览。关键不是“怎么拖”，而是“拖完立刻读哪、怎么读、读完往哪塞”。
为什么 event.dataTransfer.files 里只有第一个图？
常见错觉：以为拖多个文件时 event.dataTransfer.files 是数组 —— 实际它是 FileList（类数组，但不支持 forEach 或展开运算符直接用）。必须显式遍历，且每个 File 都要单独走一遍 FileReader 流程。
- 用
for (let i = 0; i 或[...files]转成真数组再处理 - 别写
files.forEach(...)—— 会报TypeError: files.forEach is not a function - 每个
File必须新建一个FileReader实例，复用会导致只显示最后一个结果
FileReader.onload 里拿不到 this 指向的 img 元素？
因为 FileReader 回调是异步执行的，this 默认指向 FileReader 实例，不是你创建的
const img = document.createElement('img');
const reader = new FileReader();
reader.onload = () => {
img.src = reader.result; // 直接用 reader.result，不依赖 this
};
reader.readAsDataURL(file);
- 避免在
onload里写this.img或this.querySelector等依赖上下文的操作 - 如果批量生成
img，建议把img作为变量传进闭包，或用reader.addEventListener('load', ...)配合bind -
reader.result在load触发后才有效；提前访问是null
大图拖进来卡顿或预览失败？
不是代码逻辑问题，而是浏览器对 base64 图片渲染有性能压力，尤其 >5MB 的图。这时候 FileReader 仍能读完，但
- 加个简单大小判断：
if (file.size > 8 * 1024 * 1024) { alert('图片太大，请压缩后上传'); return; } - 更优方案是用
URL.createObjectURL(file)替代readAsDataURL—— 内存占用低、无编码开销、支持任意大小，但注意用完要URL.revokeObjectURL()防止内存泄漏 -
createObjectURL返回的是 blob URL，仅当前页面生命周期有效，不能存数据库或跨页使用
拖拽预览本身不难，真正容易卡住的是对 FileList 类型的误判、FileReader 实例复用、以及大图时没做降级处理。这几个点漏掉一个，就可能出现“拖了没反应”“只显示最后一张”“点几下页面就卡死”之类现象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
