用 promise 封装 filereader 实现图片拖拽上传与异步预览：1. 封装 readasdataurl 函数，将事件驱动转为 async/await；2. 绑定 dragover/drop 事件并校验文件类型与大小；3. 校验后读取 data url 渲染 img 并存 file 对象；4. 用 try/catch 统一处理错误，配合 loading 状态提升体验。
用 Promise 封装 FileReader 是实现图片拖拽上传 + 异步预览的关键，它能把原本基于事件的 FileReader 转成更清晰、可链式调用的异步流程，避免回调嵌套，也方便错误统一处理。
1. 封装 FileReader 为 Promise
FileReader 的 onload 和 onerror 是事件驱动的，直接封装成 Promise 后，就能用 await 获取结果：
- 创建一个函数
readAsDataURL(file)，接收 File 对象 - 新建 FileReader 实例，监听
load事件：成功时 resolvee.target.result（即 data URL） - 监听
error事件：reject 带错误信息的 Error 对象 - 调用
reader.readAsDataURL(file)
这样后续就能 const url = await readAsDataURL(file) 直接拿到预览地址。
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
2. 处理拖拽事件并校验文件
给容器（如 <div id="drop-area">）绑定 <code>dragover、drop 事件：
-
dragover中调用e.preventDefault()，否则无法触发 drop -
drop中阻止默认行为，从e.dataTransfer.files取文件列表 - 只取第一个文件，检查是否为图片类型（
file.type.startsWith('image/')）和大小（如 ≤ 5MB） - 不满足条件就提示用户，不再继续
3. 拖拽后异步预览图片
校验通过后，用 Promise 封装的 FileReader 读取并渲染：
- 调用
readAsDataURL(file)得到 data URL - 将结果赋值给
<img>元素的src属性 - 可同时把 file 对象存到变量或 FormData 中，供后续上传使用
- 如果需要多图，可对文件列表 map + Promise.all 并行读取
4. 错误与加载状态处理
Promise 天然支持 try/catch，适合集中处理异常：
- 读取失败（如文件损坏、浏览器限制）会在 catch 中捕获
- 可在读取前显示 loading 状态（如禁用拖拽区、加 loading 动画）
- 读取完成后恢复交互，并根据结果更新 UI（成功显示图，失败弹提示）
- 注意：FileReader 不支持取消，但可忽略已 resolve/reject 之后的后续操作
不复杂但容易忽略：拖拽区域需设置明确宽高和 border/background，否则视觉上不可见；data URL 预览无需发请求，但大图可能造成内存占用，正式上传仍建议走后端接口。
