不能多次调用 FileReader 事件侦听器[重复]答案

【问题标题】：FileReader event listener cannot be called more than once [duplicate]不能多次调用 FileReader 事件侦听器[重复]
【发布时间】：2020-12-23 04:53:04
【问题描述】：

我有以下 Typescript 函数，当被调用时会打开一个窗口来请求文件，并且在用户做出选择后，它会在控制台中打印文件内容。

第一次运行正常，但问题是如果我调用它两次，它就不起作用。第二次打开窗口，但当文件被选中时，它什么也不做。这个函数有什么问题？

<input id="file-input" type="file" name="name" style="display: none;" />


printFile(){

    var input = document.getElementById('file-input');

    input.addEventListener('input', () => {

        var uploadedFile = (input as HTMLInputElement).files[0];

        var reader = new FileReader();

        reader.addEventListener('load', () => {
            console.log(reader.result);
        });
          
        reader.readAsText(uploadedFile);

    });
          
    input.click();

}

【问题讨论】：

你选择的是同一个文件还是不同的文件？
@Kaiido你是对的，如果你选择相同的文件，这不起作用，但是解决方案是什么？

标签： javascript typescript

【解决方案1】：

您正在向 FileReader 添加一个侦听器，然后再次实例化它。正确的工作方式应该类似于 （类似的示例，但使用图像）：

HTML

<input
  #fileInput
  type="file"
  accept="image/png, image/jpeg"
  (change)="handleChosenFile($event)"
/>

打字稿

handleChosenFile(event: Event) {
  const target = event.target as HTMLInputElement;
  if (target.files && target.files.length) {
    this.selectedFile = target.files.item(0);
    const reader = new FileReader();
    reader.readAsDataURL(this.selectedFile);
    reader.onload = () => {
      // Your function
    };
  } else {
    // Your alert to "no file selected"
  }
}

【讨论】：

他们为新实例添加了一个新的监听器。他们的代码应该可以工作。
Lucas，handleChosenFile 如果我选择同一个文件两次，则不会触发
将onclick="this.value=null;" 添加到文件元素可以选择文件两次
我通常隐藏文件选择输入并在其位置放置一个按钮。此代码使用该方法作为示例。感谢您补充答案。

【解决方案2】：

 reader.addEventListener('load', () => {
            console.log(reader.result);
        });

应该是

 reader.addEventListener('load', (event) => {
            console.log(event.target.result);
        });

【讨论】：

这也很有用