我如何在不单击 Angular 按钮的情况下触发 OnChange 文件输入？答案

【问题标题】：how can i trigger OnChangeFile input without Button Click in Angular?我如何在不单击 Angular 按钮的情况下触发 OnChange 文件输入？
【发布时间】：2022-12-03 00:57:38
【问题描述】：

我正在尝试将文件上传到 AWS，但我不想按“选择文件”按钮。它应该自动触发有没有办法实现这个

在我的 .html 文件中

<div class="content">
  <input (change)="onChangeFile($event)" type="file" />
</div>

在我的 .ts 文件中

 async onChangeFile(event: any) {
    console.log(event.target.files[0]);
    this.fileSelected = event.target.files[0];
    console.log(environment);
    console.log('Uploaded');
    await this.S3CustomClient.uploadFile(
     .uploadFile(this.fileSelected, this.fileSelected.type, undefined, this.fileSelected.name, "private")
      .then((data: UploadResponse) => console.log(data))
      .catch((err: any) => console.error(err))

【问题讨论】：

你想什么时候触发上传？您能否详细说明“自动触发”是什么意思？
当我们单击选择按钮时，将打开一个文件选择器对话框，我们可以在不单击的情况下自动触发选择按钮吗？ @SeanAnglim
好的，您是否希望文件选择器窗口在页面加载后立即自动打开？
是的@SeanAnglim

标签： angular typescript

【解决方案1】：

出于安全原因，文件选择器对话框只能在用户激活时显示 - 例如单击事件。你想要的是不可能的。

【讨论】：

【解决方案2】：

您可以使用调度事件:

<div  class="content">
  <input #fileOne (change)="onChangeFile($event)" type="file" />
</div>

 
//In your TS FILE

@ViewChild("fileOne") fileOne : ElementRef;   

ngAfterViewInit() {
   setTimeout(() => {
   const e = new Event("change");
   this.fileOne.nativeElement.dispatchEvent(e);
  },2000)
}

【讨论】：

这不是一个好的答案。出于安全原因，此行为将被浏览器阻止。如果它在您尝试时有效，那只是边缘情况，将在下一个版本中被阻止。