Angular 属性在“窗口”类型上不存在

Question

I have a function to upload, but I have the following errors:

Property 'File' does not exist on type 'Window'. Property 'FileList' does not exist on type 'Window'. Property 'FileReader' does not exist on type 'Window'. Property 'result' does not exist on type 'EventTarget'.

MY Component

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import { UploadService } from './upload.service';
import 'jquery-ui-bundle';


@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {
  categories: any;

  constructor( private uploadService: UploadService) { }

  ngOnInit() {
    $(document).ready(function() {
      document.getElementById('pro-image').addEventListener('change', readImage, false);

      $( ".preview-images-zone" ).sortable();

      $(document).on('click', '.image-cancel', function() {
          let no = $(this).data('no');
          $(".preview-image.preview-show-"+no).remove();
      });
  });

  var num = 1;
  function readImage(event) {
      if (window.File && window.FileList && window.FileReader) {
          var files = event.target.files; //FileList object
          var output = $(".preview-images-zone");

          for (let i = 0; i < files.length; i++) {
              var file = files[i];
              if (!file.type.match('image')) continue;

              var picReader = new FileReader();

              picReader.addEventListener('load', function (event) {
                  var picFile = event.target;
                  var html =  '<div class="preview-image preview-show-' + num + '">' +
                              '<div class="image-cancel" data-no="' + num + '">x</div>' +
                              '<div class="image-zone"><img id="pro-img-' + num + '" src="' + picFile.result + '"></div>' + '</div>';

                  $(".preview-image.preview-show-" + num).remove();
                  output.prepend(html);
                  num = num + 1;
              });

              picReader.readAsDataURL(file);
          }
          $("#pro-image").val('');
      } else {
          console.log('Browser not support');
      }
  }
  }
}

Answer 1

Since File is not an existing property of window. You will need to cast window as any or use object['property'] notation

if ((window as any).File && (window as any).FileList && (window as any).FileReader) or if (window['File'] && window['FileList'] && window['FileReader']

instead of attaching change listener in component you can do this in html. This is the better way of doing this. Try to avoid jQuery as much as possible in the component to make the code look cleaner.

<input type="file" (change)="fileChangeListener($event)">

in component

fileChangeListener($event) {
    const file: File = $event.target.files[0];
    const myReader: FileReader = new FileReader();

    myReader.onloadend = (event: any) => {
      this.image = event.target.result;
    };

    myReader.readAsDataURL(file);
  }

Answer 2

Seeing that you use the any type. You can wrap your calls to cast the window type as any .

This:

if (window.File && window.FileList && window.FileReader) { //...

Becomes:

if ((window as any).File && (window as any).FileList && (window as any).FileReader) { //...

I wrote an article on this here . This is typescript complaining that you're trying to access a property on the window that typescript doesn't know about. This article explains the best way to handle it while remaining type safe.

You can leverage the same fix for the result.

this:

picReader.addEventListener('load', function (event) {
                  var picFile = event.target;

becomes:

picReader.addEventListener('load', function (event) {
                  var picFile = event.target as any;