必须用 filereader 读取本地 json 文件，因 fetch/xhr 无法直接访问用户文件；需校验内容而非扩展名，用 readastext() 后 trim 并去除 bom 再 json.parse，配合 try/catch 处理常见格式错误。
用 FileReader 读取上传的 JSON 文件内容
浏览器里没法直接用 fetch 或 XMLHttpRequest 读取用户本地选中的文件，必须靠 FileReader。它能把 input[type="file"] 拿到的 File 对象转成文本或 JSON 对象。
关键点：不是所有上传的文件都叫 .json，后缀可伪造；真正要校验的是内容是否合法 JSON，而不是扩展名。
- 监听
input的change事件，拿到e.target.files[0] - 新建
FileReader实例，用readAsText()（别用readAsDataURL） - 在
onload里用JSON.parse()解析，加try/catch捕获格式错误 - 不要在
onloadend里解析——此时result可能是null或未就绪
为什么 JSON.parse() 常报错：常见 JSON 格式陷阱
用户上传的“JSON 文件”经常不是标准 JSON：开头有 BOM、结尾多逗号、用了单引号、包含注释、或者其实是 JSONL（每行一个 JSON）。这些都会让 JSON.parse() 直接抛 SyntaxError。
- BOM（
\uFEFF）常见于 Windows 记事本保存的 UTF-8 文件，需手动去除：text.replace(/^\uFEFF/, '') - 单引号或末尾逗号 → 不是合法 JSON，无法绕过，只能提示用户修正或用第三方库（如
json5）解析（不推荐生产环境） - 如果确定是 JSONL，得按换行切分再逐行
JSON.parse() - 空文件或纯空白也会导致
JSON.parse('')报错，解析前先text.trim() !== ''
完整可运行的最小示例（含错误处理）
<input type="file" id="jsonFile" accept=".json"><pre class="brush:php;toolbar:false;" id="output"><script> document.getElementById('<a style="color:#f60; text-decoration:underline;" title= "js"href="https://m.php.cn/zt/15802.html" target="_blank">jsonFile').addEventListener('change', e => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { try { const text = reader.result.replace(/^\uFEFF/, '').trim(); if (!text) throw new Error('文件为空'); const data = JSON.parse(text); document.getElementById('output').textContent = JSON.stringify(data, null, 2); } catch (err) { document.getElementById('output').textContent = '解析失败：' + err.message + '\n' + '原始内容（前100字符）：\n' + reader.result.substring(0, 100); } }; reader.onerror = () => { document.getElementById('output').textContent = '读取文件失败'; }; reader.readAsText(file, 'UTF-8'); }); </script>
大文件或需要流式处理时的替代思路
如果 JSON 文件超过几 MB，FileReader 全量读入内存可能卡顿，且无法中断。这时候不能硬扛，得换策略：
- 用
stream()+TextDecoderStream（Chrome 109+、Firefox 117+ 支持），边读边解析，适合超大 JSON 数组 - 限制上传大小（
input加max-size属性或 JS 检查file.size），比如 >5MB 就拒绝 - 服务端才是大 JSON 的主战场：前端只传
File，后端解析并返回结构化结果，避免把压力全压在浏览器上
真正难的不是读出来，而是判断这个“JSON”到底合不合预期——字段缺不缺、类型对不对、嵌套深不深。这些得靠后续校验，FileReader 只负责打开门。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
