FileReader()以角度返回未定义和伪路径

<div class="container">
  <form #myForm id="myForm">
    <div class="row">
      <div class="col-10">
        <label for="csvFile">Select CSV File</label>
        <input class="form-control mb-3" type="file" accept=".csv" #csvFile />
      </div>
      <div class="col-2">
        <!-- <button (click)="myClickFunction($event)" class= "btn btn-secondary mt-4" type="submit" value="Submit">Upload</button> -->
        <input (click)="myClickFunction($event)" class="btn btn-secondary mt-4" type="submit" value="Upload" />
      </div>
    </div>
  </form>
</div>

import {Component, VERSION, ViewChild, ElementRef, OnInit} from "@angular/core";
import { FormsModule, ReactiveFormsModule} from '@angular/forms';
import {FormBuilder} from '@angular/forms';
import { NgModule} 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()
    console.log(this.csvFile.nativeElement.value);

    const input =this.csvFile.nativeElement.value.files[0];
    const reader = new FileReader();

    console.log("Form submitted " + input);
  }
}