FileReader用于读取本地文件内容，需通过readAsText()等方法异步读取，onload回调中获取result；直接console.log(files)仅显示元信息，无法获取正文。
input 类型为 file 的元素，选中文件后不会自动把内容“打印到控制台”——它只提供一个 FileList 对象，你需要主动读取并解析内容。直接 console.log(event.target.files) 只能看到元信息（名字、大小、类型），看不到文件正文。
用 FileReader 读取文本文件并输出到 console
这是最常用也最稳妥的方式，适用于 .txt、.csv、.json、.log 等纯文本类文件。
- 必须使用
FileReader实例的readAsText()方法，不能直接访问file.content（不存在） - 读取是异步的，
onload回调里才能拿到完整内容，console.log(reader.result)才有效 - 注意编码：不指定
encoding参数时，默认用 UTF-8；若文件是 GBK 编码，需显式传'GBK'（但浏览器原生支持有限，建议转为 UTF-8）
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
console.log('文件内容：', reader.result);
};
reader.onerror = () => {
console.error('读取失败：', reader.error);
};
reader.readAsText(file, 'UTF-8'); // 第二个参数可选，但建议显式写出
});
处理非文本文件（如图片、PDF）时 console 能打什么
你无法在控制台直接“打印图片像素”或“打印 PDF 文本”，但可以输出结构化信息或 base64 数据用于调试。
-
console.log(file)会显示name、size、type、lastModified—— 这是安全且必有的元数据 - 用
reader.readAsDataURL(file)可得 base64 字符串，适合快速预览或传给后端，但过长会刷屏，建议截断：console.log(reader.result.slice(0, 100) + '...') - PDF 或 Word 等二进制文件，前端不解析就无法提取文字；想查内容，必须走服务端解析或集成
pdfjs-dist等专用库
常见错误：为什么 console 里只看到空 FileList 或 undefined
这不是代码写错了，而是 DOM 状态或事件时机问题。
立即学习“前端免费学习笔记（深入）”；
- 用户没选文件就触发了事件？检查
e.target.files.length === 0再执行后续逻辑 - 用了
click()模拟点击但没监听change？input.click()不会触发change，要手动 dispatch 或改用input的onchange属性绑定 - React/Vue 中直接操作
ref的files？确保 ref 已挂载，且事件发生在用户真实选择之后（不是初始渲染时） - 控制台里看到
FileList { length: 0 }？说明input元素被重新渲染或重置过，比如表单提交刷新、组件 key 变更
真正容易被忽略的是：文本文件如果含 BOM 头（如 UTF-8 with BOM），reader.result 开头会出现不可见字符，可能干扰后续 JSON.parse() 或正则匹配——打印前先 trim() 或用 reader.readAsText(file).then(...) 配合 String.prototype.replace(/\uFEFF/g, '') 清理。
