用 Promise 包装 FileReader 可将拖拽或文件输入的读取操作转为标准异步流程：先阻止 dragover/drop 默认行为，提取 file 对象，再通过 Promise 封装 onload/onerror 实现 readAsText 等方法，支持 async/await、错误处理与多文件并行读取。
用 Promise 包装文件拖拽读取操作，核心是把 FileReader 的事件回调转为标准 Promise 流程，让 drop 或 input 事件中对文件的读取更易链式调用、错误处理和组合。
监听拖拽事件并提取文件
先阻止默认行为，从 dataTransfer.files 拿到 File 对象（它本身是同步的，不需 Promise）：
注意：一个拖拽可能含多个文件，通常只取第一个或遍历处理
- 给目标区域绑定
dragover（仅用于允许拖放）和drop事件 -
event.preventDefault()必须在两个事件中都调用，否则浏览器会打开文件 - 从
event.dataTransfer.files[0]获取首个文件对象
用 Promise 封装 FileReader.readAsText
FileReader 是事件驱动的，需手动将其 onload 和 onerror 转为 Promise 的 resolve/reject：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
function readFileAsText(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
reader.readAsText(file, 'UTF-8'); // 可选编码参数
});
}
同理可封装 readAsDataURL（适合图片预览）或 readAsArrayBuffer（适合二进制处理）
在 drop 回调中使用 Promise 链
获取文件后直接调用封装函数，支持 async/await 或 .then()：
dropArea.addEventListener('drop', async (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (!file) return;
try {
const content = await readFileAsText(file);
console.log('文件内容：', content.substring(0, 100));
} catch (err) {
console.error('读取失败：', err.message);
}
});
- 也可用
Promise.all(files.map(readFileAsText))并行读多个文件 - 建议加类型判断（如
file.type.startsWith('text/')）避免读取非文本文件报错 - 大文件读取时可监听
reader.onprogress，但该事件不直接返回 Promise，需额外封装
补充：兼容 input[type="file"] 场景
逻辑完全一致，只是事件源换成 input 元素的 change 事件：
fileInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (file) {
const text = await readFileAsText(file);
renderPreview(text);
}
});
这样就把原本嵌套的回调写法，变成可复用、可 await、可 catch 的现代异步流程。
