如何在Angular的服務器上僅上傳一個文件？

Question

我想使用Angular在服務器上上傳文件。 我使用了以下鏈接： https : //malcoded.com/posts/angular-file-upload-component-with-express可以附加多個文件。

但我只希望附加一個文件，而僅上傳一個文件。 這是我的代碼：

https://stackblitz.com/edit/angularizjqax?file=src%2Fapp%2Fupload%2Fdialog%2Fdialog.component.html

<input type="file" #file style="display: none" (change)="onFilesAdded()"/>
<div class="container" fxLayout="column" fxLayoutAlign="space-evenly stretch">
  <h1 mat-dialog-title>Upload Files</h1>
  <div>
    <button [disabled]="uploading || uploadSuccessful" mat-raised-button color="primary" class="add-files-btn" (click)="addFiles()">
      Add Files
    </button>
  </div>

  <!-- This is the content of the dialog, containing a list of the files to upload -->
  <mat-dialog-content fxFlex>
    <mat-list>
      <mat-list-item *ngFor="let file of files">
        <h4 mat-line>{{file.name}}</h4>
        <mat-progress-bar *ngIf="progress" mode="determinate" [value]="progress[file.name].progress | async"></mat-progress-bar>
      </mat-list-item>
    </mat-list>
  </mat-dialog-content>

  <!-- This are the actions of the dialog, containing the primary and the cancel button-->
  <mat-dialog-actions class="actions">
    <button *ngIf="showCancelButton" mat-button mat-dialog-close>Cancel</button>
    <button mat-raised-button color="primary" [disabled]="!canBeClosed" (click)="closeDialog()">{{primaryButtonText}}</button>
  </mat-dialog-actions>
</div>

我希望用戶只能附加一個文件，如果用戶再次嘗試附加，則應刪除第一個附件，並且僅顯示最新的附件。

https://stackblitz.com/edit/angular-izjqax?file=src%2Fapp%2Fupload%2Fdialog%2Fdialog.component.html

Answer 1

這是一個Stackblitz示例，演示了如何制作組件上載文件。

這個想法是有輸入來接收文件

HTML ：添加您自己的錯誤代碼

<h1 mat-dialog-title>Upload Files</h1>
  <div>
    <input type="file" (change)="selFile($event.target.files)">
  </div>
  <button (click)="startUpload()">Upload</button>

然后上傳

零件

  selectedFile: any;
  selFile(event: FileList) {
    this.selectedFile = event.item(0);
  }
  startUpload() {
    const file = this.selectedFile;
    //call web service to upload
  }