浏览器无法直接解析csv，必须通过input[type="file"]获取file对象，再用filereader.readastext()读取为文本，最后用papaparse等库解析为json；全程在前端完成，无需后端介入。
用 input type="file" 读取 CSV 文件内容
浏览器不能直接解析 CSV，必须先读取文件二进制或文本内容。关键不是“上传”，而是“在前端读取并解析”。input[type="file"] 是唯一标准入口，绑定 change 事件后，从 e.target.files[0] 拿到 Blob 对象。
常见错误：直接把 files[0] 当字符串用 —— 它是二进制对象，得用 FileReader 或 stream() 处理。
- 推荐用
FileReader.readAsText()，兼容性好，适合中小 CSV（ - 避免用
readAsDataURL()，多一层 base64 编码，纯属冗余 - 注意字符编码：没指定时默认 UTF-8；若 CSV 是 GBK/GB2312，需后端转码或前端用
encoding库（如iconv-lite），但浏览器原生不支持
用 PapaParse 解析 CSV 字符串为 JSON 数组
手写 CSV 解析器极易出错（引号嵌套、换行、逗号在字段内等）。PapaParse 是目前最稳的前端 CSV 解析库，专治各种边缘 case。
它返回的默认结构是：{ data: [...rows], errors: [], meta: {...} }，其中 data 就是你要的 JSON 数组。
- 安装：
npm install papaparse，或通过 CDN 加载papaparse.min.js - 调用时加
header: true，自动把首行当 key，生成对象数组（否则是二维数组） - 若 CSV 无表头，用
header: false+dynamicTyping: true自动转数字/布尔 - 大文件（>5MB）建议启用
worker: true防止页面卡死
const csv = "name,age\nAlice,30\nBob,25";
Papa.parse(csv, {
header: true,
dynamicTyping: true
});
// → { data: [{ name: "Alice", age: 30 }, { name: "Bob", age: 25 }] }
处理常见 CSV 格式问题：空行、BOM、多余空格
真实 CSV 经常带隐藏干扰项，不清理会导致解析结果错位或字段值异常。
- BOM（
\ufeff）：Windows 记事本保存的 UTF-8 CSV 开头可能有，用text.replace(/^\uFEFF/, '')清掉 - 空行：PapaParse 默认保留空行（
data里出现{}或空对象），加skipEmptyLines: true跳过 - 字段首尾空格：PapaParse 不自动 trim，需手动处理或加
transform: (val) => val.trim() - 分隔符不是逗号？用
delimiter: ";"或delimiter: "\t"显式指定
不需要后端也能完成全部流程
整个过程（选文件 → 读文本 → 解析 → 得 JSON）完全在浏览器内存中完成，不触发任何 HTTP 请求。所谓“上传”，只是用户操作习惯说法；真正需要后端介入，仅当你想把 JSON 存到服务器时才发生。
容易被忽略的一点：CSV 行末可能混用 \r\n、\n 或 \r，PapaParse 内部已处理，但如果你自己切行（比如用 split("\n")），会漏掉 \r 导致字段错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
