类型"事件目标"错误中的属性"文件"不存在

Question

>我正在尝试从我的 ionic 2 应用程序访问输入文件的值，但仍然面临属性文件在类型"事件目标"上不存在的问题。因为它在 js 中正常工作，但在打字稿中不能正常工作。代码给出如下：

  document.getElementById("customimage").onchange= function(e?) {
            var files: any = e.target.files[0]; 
              EXIF.getData(e.target.files[0], function() {
                  alert(EXIF.getTag(this,"GPSLatitude"));
              });
          }

请帮助我解决此问题，因为它没有构建我的 ionic 2 应用程序。

Answer 1

你可以把它转换为 HTMLInputElement：

document.getElementById("customimage").onchange = function(e: Event) {
    let file = (<HTMLInputElement>e.target).files[0];
    // rest of your code...
}

更新：

你也可以使用它：

let file = (e.target as HTMLInputElement).files[0];

Answer 2

e.target属性类型取决于您在 getElementById(...) 上返回的元素。 files是input元素的属性：https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

在这种情况下，TypeScript 编译器不知道您正在返回一个 input 元素，我们也没有特定于此的Event类。因此，您可以创建一个类似于以下代码：

interface HTMLInputEvent extends Event {
    target: HTMLInputElement & EventTarget;
}
document.getElementById("customimage").onchange = function(e?: HTMLInputEvent) {
    let files: any = e.target.files[0]; 
    //...
}

<</div> div class="one_answers">

这是更多的行，但我认为这是最清晰的。

    const onChange = (event: Event) => {
      const target= event.target as HTMLInputElement;
      const file: File = (target.files as FileList)[0];
      /** do something with the file **/
    };

2022 年更新：有人正确地指出，第二行的两个演员是不必要的，这是完全正确的，我已经修改了我的答案。

    const onChange = (event: React.ChangeEvent) => {
        const target= event.target as HTMLInputElement;
        const file = target.files[0];
        /** do something with the file **/
    };

Answer 3

const handleFileInput = (event: ChangeEvent) => {
        const target = event.target as HTMLInputElement;
        const file: File = (target.files as FileList)[0];
        /** do something with the file **/
    };

我会把Event改成ChangeEvent，但是德文克拉克的其余答案很好:)

Answer 4

// use - ChangeEvent<HTMLInputElement>
document.getElementById("customimage").onchange= function(e?: ChangeEvent<HTMLInputElement>) {
            var files: any = e.target.files[0]; 
              EXIF.getData(e.target.files[0], function() {
                  alert(EXIF.getTag(this,"GPSLatitude"));
              });
          }

Answer 5

const onChange => (event: Event): void {
    const input = event.target as HTMLInputElement;
    if (!input.files?.length) {
        return;
    }
    const file = input.files[0];
    console.log(file);
}

Answer 6

我发现：

<input type="file"  accept="image/*" 
(change)="upload($event)">

和

<ion-input type="file"  accept="image/*" 
(change)="upload($event)"><ion-input>  or (ionChange)

不以相同的方式处理事件。因此event.target由不同的参数组成。

因此，我没有使用 ion-input 标签，而是使用带有(change)="upload($event)"触发器的普通角度<input>标签。

它在Ionic 4上为我工作。

Answer 7

基于其他一些答案和随着时间的推移的轻微重构，我现在通常将 ChangeEvent 转换为一行，如下所示：

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const files = e.target.files;
  if (!files || !files.length) {
    alert("Please select a file!");
  }
}

Answer 8

最好尽可能避免类型转换。使用 e.currentTarget 而不是 e.target

Answer 9

当我

使用 ：

e.target.files

它说目标没有文件属性，所以正如你在类型脚本中所说的那样。您还可以使用 ：

e.target['files'][0]

它解决了我的问题。

Answer 10

我的问题解决了，我正在使用<any>

如果你使用useRef，它也可以工作

Answer 11

function getImg(e: Event) {
  
    const target = e.target as HTMLInputElement;
    const files = target?.files;
    if (files) {
        let url = window.URL.createObjectURL(files[0]);
        return url;
    }
}

Answer 12

经过多次迭代，这对我有用：

async function upload(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
    if (!e.currentTarget || !e.currentTarget.files) return;
    const file = e.currentTarget.files[0];
    //...
}

我在typescript@^5.1.6，使用Svelte的on:change={upload}，但不确定这是否相关