'파일' 속성이 스크립트 형식의 'EventTarget' 오류에 없습니다.

'파일' 속성이 스크립트 형식의 'EventTarget' 오류에 없습니다.

ionic 2 애플리케이션에서 입력 파일의 값에 액세스하려고 하는데 여전히 'EventTarget' 유형에 속성 파일이 존재하지 않는 문제가 있습니다.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 애플리케이션을 구축하지 않고 있으니 이 문제를 해결할 수 있도록 도와주세요.

HTML 입력 요소로 캐스팅할 수 있습니다.

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];

그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]; 
    //...
}

이것이 더 많은 대사이긴 하지만 가장 선명한 것 같습니다.

    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 **/
    };

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, 하지만 데빈클락의 나머지 대답은 훌륭합니다 :)

// 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"));
              });
          }

const onChange => (event: Event): void {
    const input = event.target as HTMLInputElement;

    if (!input.files?.length) {
        return;
    }

    const file = input.files[0];
    console.log(file);
}

다음을 발견했습니다.

<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태그를 지정하지만 정상 각도<input>꼬리표를 달다(change)="upload($event)"방아쇠를 당기다

Ionic 4에서 나한테 효과가 있었어요.

가급적 Type Casting을 피하는 것이 좋습니다. 사용합니다.e.currentTarget표적 대신에

몇 가지 다른 답변과 시간 경과에 따른 약간의 리팩터링을 바탕으로 일반적으로 ChangeEvent를 다음과 같이 한 줄로 캐스팅합니다.

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

다음을 사용할 때 동일한 문제를 해결할 수 있습니다.

e.target.files

target에는 파일 속성이 없다고 쓰여 있어서, type script에서 말씀하신 대로입니다.다음을 사용할 수도 있습니다.

e.target['files'][0]

제 문제를 해결해 줬습니다.

나의 문제는 해결되었고, 나는 사용중입니다.<any>

Ref를 사용하면 작업이 됩니다.

언급URL : https://stackoverflow.com/questions/43176560/property-files-does-not-exist-on-type-eventtarget-error-in-typescript