如何校验用户上传文件是否为JSON文件并读取其中数据

你可以通过两层校验+文件读取的逻辑完成需求，初筛快速拦截明显不符合要求的文件，内容校验保证文件本身是合法JSON，同时完成数据提取。

校验规则说明 #

• 第一层初筛：校验文件MIME类型、文件名后缀，快速过滤非JSON文件
• 第二层内容校验：读取文件文本内容后尝试JSON解析，解析失败则判定为非法文件，这层可以拦截改后缀的伪造JSON文件，是最严谨的校验逻辑

完整实现代码 #

首先优化文件选择输入框，加文件类型过滤引导：

<input type="file" onChange={checkJSON} accept=".json,application/json" />

给input加accept属性可以在系统文件选择弹窗中默认筛选JSON文件，降低用户选错概率，但这只是前端交互引导，不能替代正式校验逻辑。

对应checkJSON方法实现：

async function checkJSON(e) {
  const file = e.target.files[0];
  if (!file) return;

  // 第一层：MIME类型+后缀初筛
  const validMime = file.type === 'application/json';
  const validSuffix = file.name.toLowerCase().endsWith('.json');
  if (!validMime && !validSuffix) {
    alert('请选择后缀为.json的文件');
    e.target.value = ''; // 清空选中值，保证重复选同个文件能正常触发事件
    return;
  }

  try {
    // 读取文件文本内容
    const fileText = await file.text();
    // 第二层：解析JSON，校验合法性同时直接拿到提取后的结构化数据
    const jsonData = JSON.parse(fileText);
    console.log('提取到的JSON数据：', jsonData);
    // 后续直接操作jsonData写业务逻辑即可
    alert('JSON文件校验通过，数据读取完成');
  } catch (err) {
    alert('所选文件不是合法JSON，内容解析失败');
    e.target.value = '';
  }
}

兼容说明 #

如果需要兼容不支持file.text()方法的旧版浏览器，可以替换为FileReader的读取实现：

// 旧浏览器兼容写法：包装FileReader为Promise
function readFileText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = e => resolve(e.target.result);
    reader.onerror = e => reject(e);
    reader.readAsText(file);
  })
}
// 把上面代码里的 await file.text() 替换为 await readFileText(file) 即可

注意事项 #

• 不要仅靠后缀、MIME类型判断文件合法性，这两个值都可以被随意篡改，必须做内容解析校验
• 每次校验/处理完成后记得清空input的value，否则用户下次选择同一个文件时不会触发onChange事件

内容的提问来源于stack exchange，提问作者Shlok Sharma