Question

我有一个文件输入，可以选择多个文件并查看其预览...如果有必要，如何从预览中将其删除？

HTML

 <img [src]="urls[0]">
      <input type="file" id="files" multiple (change)="detectFiles($event)">


    <div class="row">
      <a class="folder_Up">
        <img src="assets/folderUP.svg" title="Item attachments" />       
      </a>

      <div class="Upcard" *ngFor="let url of urls | slice:1">
          <img [src]="url">
      </div>

        <div class="Upcard">
          <div class="card-block">
          </div>
        </div>

角度（打字稿）

urls = new Array<string>();
  detectFiles(event) {
    this.urls = [];
    let files = event.target.files;
    if (files) {
      for (let file of files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }
        reader.readAsDataURL(file);
      }
    }
  }

我尝试过但无济于事的

  <div class="Upcard" *ngFor="let url of urls | slice:1">
          <img [src]="url"><span class="delete-entry" style="cursor: pointer;" (click)="deleteImage(image)">x</span>
      </div>

 private deleteImage(image: any): void {
    this.urls = this.urls.filter((a) => a !== image);
  }

Answer 1

尝试类似的方法（我已经使用这种确切方法从我的网站中删除了预览图片）
角度

$scope.removeItem = function (url) {
    $scope.urls.splice(url, 1);
};

HTML

<a ng-click="removeItem(url)"><i class="fa fa-trash"></i></a>

Answer 2

由于要遍历网址并使用url来显示图片，因此删除时应使用相同的图片：

//  *ngFor="let url of urls

<div class="Upcard" *ngFor="let url of urls | slice:1">
          <img [src]="url"><span class="delete-entry" style="cursor: pointer;" (click)="deleteImage(url)">x</span>
      </div>

然后在组件中，从列表中删除网址：

private deleteImage(url: any): void {
    this.urls = this.urls.filter((a) => a !== url);
}

从预览角度删除图像

2 个答案: