angular - 无法使用 ngx-mat-file-input 和 Angular 10 读取文件

Question

我是 angular 新手，我正在尝试读取 csv 文件。我的问题是当我使用 ngx-mat-file-input 加载文件时，出现如下错误：

未捕获的 TypeError：无法在“FileReader”上执行“readAsText”：参数 1 不是“Blob”类型。

我的 html 看起来像这样：

<mat-card class="zone zone-value flex-column">

    <div class="container">
        <h3 mat-dialog-title>Import</h3>

        <!--The followin line works. If use this i can see the file content.-->
        <input type="file" (change)="onChange($event.target.files)">

        <form class="mat-dialog-content" [formGroup]="form" (ngSubmit)="onSubmit(form)" novalidate>

            <div class="form">
                <mat-form-field color="accent">

                    <!--The followin line DOES NOT work.  If use this i can see the file content.-->
                    <ngx-mat-file-input #removableInput [multiple]="multiple" [accept]="accept" [color]="color"
                        formControlName="fileName" placeholder="Load a file"></ngx-mat-file-input>
                    <!-- <button mat-icon-button matSuffix *ngIf="!removableInput.empty" (click)="removableInput.clear($event)">
            <mat-icon>clear</mat-icon>
          </button> -->

                </mat-form-field>
            </div>

            <!-- action buttons-->
            <div mat-dialog-actions>
                <button mat-button [type]="submit" [disabled]="!form.valid">Import</button>
                <button mat-button (click)="closeClick()" tabindex="-1">Cancel</button>
            </div>
        </form>
    </div>

</mat-card>

但是当我使用以下行时，它可以工作，我做错了什么？

<input type="file" (change)="onChange($event.target.files)">

这里显示了 csv 文件的内容。所以使用 ngx-mat-file-input 出了点问题

我的TS是这样的。使用第二个选项附加文件时出现错误。

import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Component, Inject } from '@angular/core';
import { Validators, FormGroup, FormBuilder } from '@angular/forms';
import { ThemePalette } from '@angular/material/core';
import { NgxMatFileInputModule, NgxMatFileInputIcon, AcceptValidator, MaxSizeValidator } from '@angular-material-components/file-input';

import { Observable, fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';
import { getMatIconFailedToSanitizeLiteralError } from '@angular/material/icon';

@Component({
  selector: 'csv-parser-dialog',
  templateUrl: 'csv-parser.dialog.html',
  styleUrls: ['csv-parser.dialog.css']
})

export class ImportDataDialogComponent {

  form: FormGroup;

  multiple = false;
  accept = ".csv";
  color: ThemePalette = 'primary';
  maxSize = 1;

  constructor(
    public dialogRef: MatDialogRef<ImportDataDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private formBuilder: FormBuilder
    ) {

    dialogRef.disableClose = true;
    this.buildForm();
  }

  private buildForm() {
    this.form = this.formBuilder.group({
      fileName: ['', [Validators.required, MaxSizeValidator(this.maxSize * 1024)
      ]]
    });
  }



  fileContent: string = '';

  public onChange(fileList: FileList): void {

console.log('fileList ', fileList);


    let file = fileList[0];
    let fileReader: FileReader = new FileReader();
    let self = this;
    fileReader.onloadend = function(x) {
      console.log('file reader ', fileReader.result);
      //self.fileContent = fileReader.result;
    }
    fileReader.readAsText(file);
    console.log('file reader 2 ', fileReader);
    
  }
  

  readFile(file: File): Observable<any> {

    console.log('file tiene ', file);

    const reader = new FileReader();
    reader.onload = (loadEvent) => (
      console.log('que tiene ', loadEvent.target.result));

    reader.readAsDataURL(file);
    return new Observable;

  }


  onSubmit({ value, valid }: { value: File, valid: boolean }) {

    if (valid) {
      const fileName = value.name;
console.log('size', value.size);

      const fileString = this.readFile(value).subscribe(
        r => {
          console.log('res tiene ', r);
        },
        e => {
          console.log('res tiene ', e);

        });
      this.dialogRef.close({ data: { button: 'EXPORT_BUTTON_CLICKED', dataArray: [] } });
    } else {
      console.log("NOT valid form");
      this.form.markAllAsTouched();
    }
  }

  closeClick() {
    this.dialogRef.close({ data: 'CANCEL_BUTTON_CLICKED' });
  }

  submit() {
    console.log("submited method");
  }

  //Getters form fields
  get fileNameField() {
    return this.form.get('fileName');
  }

}

有人可以帮助我吗？

标签： angularangular-materialruntime-errorfilereadermat-file