如何在html和typescript中连续两次导入同一个文件？答案

【问题标题】：How to import the same file two times in a row in html and typescript?如何在html和typescript中连续两次导入同一个文件？
【发布时间】：2020-03-13 13:25:53
【问题描述】：

我在 html 文件中有一个输入元素，如下所示：

 <input
   type="file"
   (change)="receiveFile($event)"
   id="inputFileButton"
   hidden
 />

它正在等待用户导入文件。单击按钮时，我调用uploadFile() 方法，该方法在调用receiveFile($event) 的输入元素上发出事件。像这样：

  receiveFile($event) {
  const fileFromHtml = $event.target.files[0];
  const importedFile: FormData = new FormData();
  importedFile.append('positions', fileFromHtml);
   this.store.dispatch({
    type: '[Position] Import Positions',
    importFile: importedFile,
    positionSetId: this.positionSetId,
    accountSetId: this.accountSetId,
   });
  }

  uploadFile() {
   this.testvar = !this.testvar;
   const element: HTMLElement = document.getElementById(
     'inputFileButton',
   ) as HTMLElement;
   element.click();
  }

除了我想连续两次导入同一个文件的情况外，它工作正常。第二次根本没有调用receiveFile($event)。

【问题讨论】：

因为你的文件没有改变。为什么您希望您的代码重新运行？目的是什么？
因为当我导入一个文件时，我会从中获取一些数据，下次我还想从文件中获取数据，没关系它是重复的。也许有一种方法可以重新启动输入字段 idk
您可以在两次通话之间重置输入。或者只是链接你的逻辑而不依赖另一个点击
如何重置它:)
或者使用input 事件？

标签： html typescript

【解决方案1】：

您的 receiveFile() 函数仅在更改事件上运行。如果输入的是同一个文件，没有任何变化，所以不会运行。

要克服这个问题，您可以尝试清除输入

document.getElementById("inputFileButton").value = ''

【讨论】：