Angular中FileReader返回undefined及fakepath问题求助

错误根源 #

你遇到的ERROR TypeError: Cannot read properties of undefined (reading '0')，是因为代码里错误地尝试从this.csvFile.nativeElement.value.files获取文件对象——实际上input元素的value属性返回的是浏览器安全伪装后的文件路径字符串（即你看到的C:\fakepath\fileName.csv），这个字符串并没有files属性，自然会触发undefined读取错误。

正确的文件对象应该直接从input元素的files属性获取，而非value的子属性。

修正后的代码 #

home-page.component.ts

import { Component, ViewChild, ElementRef, OnInit } from "@angular/core";

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {}

  @ViewChild('csvFile') csvFile!: ElementRef;
  
  myClickFunction(event: any) {
    event.preventDefault();
    event.stopPropagation();
    
    // 直接从input元素的files属性获取文件对象
    const file = this.csvFile.nativeElement.files[0];
    if (!file) {
      console.log('请先选择CSV文件');
      return;
    }
    
    const reader = new FileReader();
    reader.onload = (e) => {
      const csvData = e.target?.result as string;
      // 解析CSV为对象数组的逻辑
      const dataArray = this.parseCSV(csvData);
      console.log('解析后的对象数组:', dataArray);
    };
    
    reader.readAsText(file);
  }
  
  // 实现CSV解析逻辑（示例）
  private parseCSV(csvText: string): any[] {
    const lines = csvText.split('\n').filter(line => line.trim());
    const headers = lines[0].split(',').map(header => header.trim());
    return lines.slice(1).map(line => {
      const values = line.split(',').map(val => val.trim());
      return headers.reduce((obj, header, index) => {
        obj[header] = values[index];
        return obj;
      }, {} as any);
    });
  }
}

额外优化点

• 增加了文件存在性判断，避免用户未选文件就点击上传的情况
• 补充了完整的CSV解析示例，将读取到的文本转换为对象数组，符合你的需求
• 移除了代码中未使用的导入（比如FormsModule、FormBuilder、NgModule），保持代码简洁

补充说明 #

浏览器返回C:\fakepath\...是出于安全机制，不允许JS直接获取用户本地文件的真实路径，所以你完全不需要关心这个路径，直接通过files属性操作文件对象即可。

内容的提问来源于stack exchange，提问作者Scott-MEARN-Developer