Angular: Как добавить / удалить файлы в Angular?

Question

Здесь я выбираю несколько изображений и шоу, используя *ngFor И там я разместил кнопку удаления, которая появляется на скриншоте, нажмите кнопку удаления, я хочу удалить выбранное изображение из выбранного списка, я попробовал код ниже, но я не получаюправильное решение.

add.component.html

<button mat-raised-button (click)="fileInput.click()">Select File</button>

<input style="display: none" type="file" (change)="onFileChanged($event)" #fileInput multiple="true">

<div *ngFor="let selected of selectedFile;let index = index">
  <h3>{{selected.name}}</h3>
  <button mat-icon-button (click)="removeSelectedFile(index)">delete</button>
</div>

add.component.ts

selectedFile: File;
ArrayOfSelectedFile = new Array<string>();

onFileChanged(event : any) {
  this.ArrayOfSelectedFile= [];
  this.selectedFile = event.target.files;
  this.ArrayOfSelectedFile.push(event.target.files);
}

removeSelectedFile(index){
  this.ArrayOfSelectedFile.splice(index,1);
}

Answer 1

Вы можете проверить это Загрузка нескольких файлов удалить , дайте мне знать, если вы хотите получить какие-либо разъяснения по этому же.

Answer 2

event.target.files уже является массивом, поэтому вы можете перебирать его с помощью ngFor.Когда вы назначаете selectedFile = event.target.files, вы делаете его массивом.Попробуйте это:

selectedFile: File;
ArrayOfSelectedFile = new Array<string>();

onFileChanged(event : any) {
  this.selectedFile = event.target.files[0];
  this.ArrayOfSelectedFile = event.target.files;
}

removeSelectedFile(index){
  this.ArrayOfSelectedFile.splice(index,1);
}

<div *ngFor="let selected of ArrayOfSelectedFile;let index = index">
  <h3>{{selected.name}}</h3>
  <button mat-icon-button (click)="removeSelectedFile(index)">delete</button>
</div>

Answer 3

HTML-код:

<button mat-raised-button (click)="fileInput.click()">Select File</button>

<input style="display: none"  #attachments type="file" (change)="onFileChanged($event)" #fileInput multiple="true">

<div *ngFor="let selected of listOfFiles;let index = index">
  <h3>{{selected}}</h3>
  <button mat-icon-button (click)="removeSelectedFile(index)">delete</button>
</div>

И код TS:

Импортируйте это:

import { Component, OnInit, Inject, ViewChild } from '@angular/core';

И внутри класса вашего компонента:

@ViewChild('attachments') attachment: any;

selectedFile: File;
fileList: File[] = [];
listOfFiles: any[] = [];

onFileChanged(event: any) {
    for (var i = 0; i <= event.target.files.length - 1; i++) {
      var selectedFile = event.target.files[i];
      this.fileList.push(selectedFile);
      this.listOfFiles.push(selectedFile.name)
  }

  this.attachment.nativeElement.value = '';
}



removeSelectedFile(index) {
 // Delete the item from fileNames list
 this.listOfFiles.splice(index, 1);
 // delete file from FileList
 this.fileList.splice(index, 1);
}

Если вы заметили, что удаленный файл снова недоступен для загрузки, для этого я использовал @ViewChild для сброса value = '', то вы можете снова выбрать удаленный файл.

Вот рабочий StackBlitz пример.

Answer 4

Вы должны удалить его из массива selectedFile.

this.selectedFile.splice(index, 1);