无法在Angular 10中使用ngx-mat-file-input读取文件

问题描述

我是新来的有角度的，我正在尝试读取一个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');
  }

}

有人可以帮助我吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）