मेरे पास अपलोड करने के लिए एक फ़ंक्शन है, लेकिन मेरे पास निम्न त्रुटियां हैं:

संपत्ति 'फ़ाइल' प्रकार 'विंडो' पर मौजूद नहीं है। संपत्ति 'फाइललिस्ट' प्रकार 'विंडो' पर मौजूद नहीं है। संपत्ति 'फाइल रीडर' प्रकार 'विंडो' पर मौजूद नहीं है। संपत्ति 'परिणाम' प्रकार 'EventTarget' पर मौजूद नहीं है।

मेरा घटक

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');
      }
  }
  }
}
4
user11052170 21 अक्टूबर 2019, 19:23

2 जवाब

सबसे बढ़िया उत्तर

चूंकि फ़ाइल विंडो की मौजूदा संपत्ति नहीं है। आपको विंडो को किसी भी रूप में डालना होगा या ऑब्जेक्ट ['प्रॉपर्टी'] नोटेशन का उपयोग करना होगा

अगर ((किसी भी विंडो के रूप में)। फ़ाइल && (किसी भी विंडो के रूप में)। फाइललिस्ट && (विंडो कोई भी)। फाइल रीडर) या अगर (विंडो ['फाइल'] && विंडो ['फाइललिस्ट'] && विंडो ['फाइल रीडर']

घटक में परिवर्तन श्रोता संलग्न करने के बजाय आप इसे html में कर सकते हैं। ऐसा करने का यह बेहतर तरीका है। कोड को साफ-सुथरा बनाने के लिए घटक में यथासंभव jQuery से बचने का प्रयास करें।

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

घटक में

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);
  }
3
Shashi 21 अक्टूबर 2019, 20:57

यह देखते हुए कि आप any प्रकार का उपयोग करते हैं। window टाइप को any के रूप में कास्ट करने के लिए आप अपनी कॉल्स को रैप कर सकते हैं।

इस:

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

बन जाता है:

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

मैंने इस पर एक लेख लिखा था यहां। यह टाइपस्क्रिप्ट शिकायत कर रहा है कि आप उस विंडो पर एक संपत्ति तक पहुंचने का प्रयास कर रहे हैं जिसके बारे में टाइपस्क्रिप्ट को पता नहीं है। यह लेख सुरक्षित रहने के दौरान इसे संभालने का सबसे अच्छा तरीका बताता है।

आप परिणाम के लिए उसी फिक्स का लाभ उठा सकते हैं।

यह:

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

बन जाता है:

picReader.addEventListener('load', function (event) {
                  var picFile = event.target as any;
0
C_Ogoo 21 अक्टूबर 2019, 20:53