Angular 2中FileReader无法识别JSON/GeoJSON类型，如何可靠获取？

你说得没错，file.type确实经常在JSON或GeoJSON文件上返回空值——这是因为很多操作系统和浏览器不会给这类文件分配标准的MIME类型，导致File API无法识别。不过有几个靠谱的办法可以解决这个问题：

方法一：检查文件扩展名 #

这是最直接的方案，虽然不能100%保证（毕竟用户可能改扩展名），但在大多数场景下足够实用。你可以提取文件名的后缀，判断是否为.json或.geojson：

// 在Angular组件中的示例代码
checkFileExtension(file: File): boolean {
  const allowedExtensions = ['.json', '.geojson'];
  const fileExtension = file.name.toLowerCase().substring(file.name.lastIndexOf('.'));
  return allowedExtensions.includes(fileExtension);
}

方法二：解析文件内容验证（更可靠） #

如果要确保文件真的是JSON/GeoJSON格式，最好的方式是读取文件内容并尝试解析，同时对GeoJSON做额外的格式校验：

// 验证是否为JSON文件
async isJsonFile(file: File): Promise<boolean> {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        JSON.parse(e.target?.result as string);
        resolve(true);
      } catch (err) {
        resolve(false);
      }
    };
    reader.onerror = () => resolve(false);
    reader.readAsText(file);
  });
}

// 额外验证是否为GeoJSON（基于GeoJSON规范）
async isGeoJsonFile(file: File): Promise<boolean> {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const content = JSON.parse(e.target?.result as string);
        // GeoJSON必须包含type字段，且值为规范中的类型
        const validGeoJsonTypes = ['Feature', 'FeatureCollection', 'Point', 'MultiPoint', 'LineString', 'MultiLineString', 'Polygon', 'MultiPolygon', 'GeometryCollection'];
        if (content.type && validGeoJsonTypes.includes(content.type)) {
          resolve(true);
        } else {
          resolve(false);
        }
      } catch (err) {
        resolve(false);
      }
    };
    reader.onerror = () => resolve(false);
    reader.readAsText(file);
  });
}

最佳实践：结合两种方法 #

为了兼顾效率和准确性，你可以先检查扩展名快速过滤大部分非目标文件，再对通过的文件进行内容解析验证：

async validateJsonOrGeoJson(file: File): Promise<'json' | 'geojson' | 'invalid'> {
  // 先检查扩展名
  const ext = file.name.toLowerCase().substring(file.name.lastIndexOf('.'));
  if (!['.json', '.geojson'].includes(ext)) {
    return 'invalid';
  }

  // 再验证内容
  const content = await this.readFileContent(file);
  try {
    const parsed = JSON.parse(content);
    // 检查是否符合GeoJSON规范
    const validGeoTypes = ['Feature', 'FeatureCollection', 'Point', 'MultiPoint', 'LineString', 'MultiLineString', 'Polygon', 'MultiPolygon', 'GeometryCollection'];
    if (parsed.type && validGeoTypes.includes(parsed.type)) {
      return 'geojson';
    }
    return 'json';
  } catch (err) {
    return 'invalid';
  }
}

// 封装读取文件内容的辅助函数
private readFileContent(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target?.result as string);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsText(file);
  });
}

需要注意的是，如果处理超大文件，解析内容可能会有性能问题，这种情况下可以只读取文件的前几百个字符来做初步验证，而不是加载整个文件。

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