Question

我具有以下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();

}

Answer 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"
  }
}

Answer 2

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

应该是

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

不能多次调用FileReader事件侦听器

2 个答案: