Home / Questions / 447255
Accepted
Emy
Asked: 2022-04-27 07:35:42 +0800 CST 2022-04-27 07:35:42 +0800 CST

错误 TS2339：将项目发送到生产时，类型“EventTarget”上不存在属性“文件”

  • 772

向所有人致以问候和美好的一天，我希望你能指导我解决我的问题。我告诉你我有一个简单的 QR 阅读器，我可以在其中加载 QR 图像并在屏幕上显示结果。它在使用 ionic serve 命令运行项目时正常工作，但是当我使用 ionic build --prod 命令将其发送到生产环境时，会生成一个错误，该错误涉及输入：

<input #fileinput type="file" accept="image/*;capture=camera" hidden (change)="handleFile($event.target.files)">

生成的错误如下：错误 TS2339：“EventTarget”类型上不存在属性“文件”。我还在 cmd 中附加了错误的捕获：

在此处输入图像描述

所以我有 tab1.page.html 的代码

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      DEMO LECTOR FILE QR
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-content>
    <input #fileinput type="file" accept="image/*;capture=camera" hidden (change)="handleFile($event.target.files)">
    <ion-button expand="full" (click)="captureImage()">
      <ion-icon slot="start" name="camera"></ion-icon>
      Capturar Imagen
    </ion-button>
    <canvas #canvas hidden></canvas>
    <ion-card *ngIf="scanResult">
      <ion-card-header>
        <ion-card-title>QR Code</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        {{ scanResult }}
      </ion-card-content>
    </ion-card>
  </ion-content>
</ion-content>

所以我有 tab1.page.ts 的代码

import { Component, ViewChild, ElementRef } from '@angular/core';
import jsQR from 'jsqr';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  @ViewChild('video', { static: false }) video: ElementRef;
  @ViewChild('canvas', { static: false }) canvas: ElementRef;
  @ViewChild('fileinput', { static: false }) fileinput: ElementRef;

  canvasElement: any;
  canvasContext: any;
  scanResult = null;

  constructor() {}

  ngAfterViewInit() {
    this.canvasElement = this.canvas.nativeElement;
    this.canvasContext = this.canvasElement.getContext('2d');
  }

  captureImage() {
    this.fileinput.nativeElement.click();
  }

  handleFile(files: FileList) {
    const file = files.item(0);
    var img = new Image();
    img.onload = () => {
      this.canvasContext.drawImage(img, 0, 0, this.canvasElement.width, this.canvasElement.height);
      const imageData = this.canvasContext.getImageData(
        0,
        0,
        this.canvasElement.width,
        this.canvasElement.height
      );
      const code = jsQR(imageData.data, imageData.width, imageData.height, {
        inversionAttempts: 'dontInvert'
      });

      if (code) {
        this.scanResult = code.data;
      }
    };
    img.src = URL.createObjectURL(file);
  }
}

我有 angular 11.2.11 和 ionic 5.6.5 的版本

angular

2 Answers

  1. Best Answer

    尝试处理函数中的文件

    在 HTML 中

    (change)="handleFile($event)

    在打字稿中

    handleFile(event): void {
   try {
   const files = event.target.files;
   ...
   } catch {}
}
    • 1

  2. 再会。您说它在开发中对您有用，但在生产中无效。

    显然变量 $event.target。文件在运行时填充，并且在加载视图（html）时它还不存在。通过声明变量的值可以为空来验证这一点，这样当值为空时，变量就不会被调用。在这里，我举一个如何添加“？”的示例。对变量验证可能的 null

    (change)="handleFile($event.target.files)" // original
(change)="handleFile($event.target.files?)" // agregando validación de posible null a files
(change)="handleFile($event.target?.files)" // agregando validación de posible null a target

    检查哪一个适合您。如果需要按顺序进行空验证，请选择：

    (change)="handleFile($event.target?.files?)" // agregando validación de posible null a target y files secuencialmente
    • 0