如何在 Angular 11 中导入 CSV 文件并将数据存储在数据库中，即 ASP.NET MVC？

问题描述

<div class="container col-md-4 px-3">
    <input type="file" class="form-control-file" id="inputBulkTUpload">
    <br><br>
    <button type="submit" class="btn btn-info shadow" (click)="onAddBulkdata()">submit</button>
    <br><br>                 
</div>

当我点击“提交”按钮时，我想将数据存储在我的表格中。

解决方法

<div>
   <span class="drag-box-highlight" [ngClass]="CSVfile !== '' ? 'file-align' : 'file-none'">
   {{CSVfile}} <i class="material-icons">done</i>
   </span>
   <input type="file" id="uploadFiles" #uploadFiles (change)="uploadFile($event)" />
   <button mat-raised-button type="button" color="primary" [ngClass]="{'component-disabled' : CSVfile === ''}"
   (click)="importProvidersDetails()" [mat-dialog-close]="true" cdkFocusInitial>{{'BUTTON_IMPORT' | translate: lang}}</button>
</div>

  public uploadableFile: any = '';
  public CSVfile: any = '';
  filePath: string;
  fileName: any;
  uploadStatus = true;
  dataSource;
  isChecked = false;


validateFile(file: any) {
    if (!file || !file.name) {
      return false;
    }
    let filename = file.name;
    filename = filename.split('.');
    const filetype = filename.pop();
    if (filetype.toLowerCase() === 'csv') {
      return true;
    } else {
      return false;
    }
  }

  uploadFile(e: any) {
    if (e && e.target && e.target.files && e.target.files.length) {
      const fileName = e.target.files[0].name.split('.');
      if (fileName && fileName[1].toLowerCase() !== 'csv') {
        this.notify.error(this.translation.translate('ERROR_CHOOSE_CSV'));
      } else {
        if (this.validateFile(e.target.files[0])) {
          this.uploadableFile = e.target.files[0];
          this.CSVfile = e.target.files[0].name;
          this.uploadFiles.nativeElement.value = '';
          return;
        }
      }
    }
    this.CSVfile = '';
  }

  importProvidersDetails() {
    console.log(this.data.providerId)
    const file = new FormData();
    file.append('file',this.uploadableFile);

    this.shippingService.importProvidersDetails(this.data.providerId,file).subscribe((response: any) => {
      this.notify.success('Provider Details imported successfully');
      this.uploadStatus = true;
      this.dataSource = '';
      this.CSVfile = '';
      this.isChecked = false;
      this.uploadableFile = '';
      
    },(error: any) => {
      console.log(error)
    });
  }