Angular

Question

问题是我有一个文件输入字段，一次只能输入一个文件，我需要这样。

如果我尝试上传一个文件，一切都很好。但是，如果我需要上传更多文件，似乎 "change" 处理程序方法不会被调用，除非我重新加载页面，这不是任何人想要的。

HTML 看起来像这样：

<div class="col-xs-7">
    <button
      class="btn btn-primary"
      [disabled]="isLoadingModal"
      (click)="activityFileInput.click()">
    archivo</button> {{ newActivity.fileName }}
    <input
      type="file"
      id="activity-file-input"
      [disabled]="isLoadingModal"
      (change)="selectFile(activityFileInput.files[0])"
      #activityFileInput
      hidden>
  </div>

组件中的函数是：

selectFile(file: File): void {
    console.log('Hello');

    if(file == undefined)
      return;

    this.newActivity.fileName = file.name;
    this.newActivity.file = file;
}

在第一个文件上传时 "Hello" 显示，没问题。但是该方法似乎并没有被多次调用。如何解决？

Answer 1

在onclick事件中设置input的值为null...

<input
  type="file"
  id="activity-file-input"
  onclick="this.value = null"
  [disabled]="isLoadingModal"
  (change)="selectFile(activityFileInput.files[0])"
  #activityFileInput
  hidden>

Answer 2

只有当您尝试上传相同的 file/image 时才会发生这种情况。当 (change) 看到相同的事件时，它不会触发给定的方法。要修复它，请在 input 标签

中添加 (click)="$event.taget.value=null"

Angular - 文件输入字段的更改检测仅工作一次

Angular - Change detection on file input field only works once

javascript

file

input

onchange