Перетащите изображение в div и отобразите предварительный просмотр, используя Angular6

Question

Я хочу перетащить изображение в div и в том же div, я хотел бы отобразить предварительный просмотр этого изображения.

Я создал простой ванильный код JS / HTML5, который сейчас пытаюсь преобразовать в Angular 6.

Это мой код

<div id="imageDrop" (drop)="drop($event)" (dragover)="allowDrop($event)" #imageDrop>

@ViewChild('imageDrop') imageDrop; 

  allowDrop(e) {
    e.preventDefault();
  }

  drop(e) {
    e.preventDefault();
    this.checkfiles(e.dataTransfer.files);
  }

  checkfiles(files){    
    if (files.length>1){
      this.imageDrop.innerHTML="Only one image/time";       
      return;
    }   
    else
    {
      this.readfiles(files);
    }
  }

  readfiles(files){
    var reader = new FileReader();
    reader.onload =  (event) =>{
      console.log('readfiles event ===== ',event);
      var image = new Image();
      image.src = event.target.result;
      image.width = 50; 
      this.imageDrop.appendChild(image);
    };
    reader.readAsDataURL(files[0]);
  }

Все мои проблемы в readfiles.

Во-первых, VScode сообщает Property result does not exist on type EventTarget о строке image.src = event.target.result;. Я не знаю, как это исправить, так как это то, что я хочу добавить в img.src, чтобы потом добавить его. Кстати, консольный журнал печатает событие, где изображение содержится в event.target.result

Во-вторых, даже если я попытаюсь добавить туда изображение и получить его предварительный просмотр, консоль говорит ERROR TypeError: _this.imageDrop.appendChild is not a function.

Как я могу продолжить, чтобы получить изображение, которое я только что уронил, и просмотреть его в этом div? Спасибо

Answer 1

Вы должны указать, что тип event.target равен FileReader, что даст вам доступ к result.

Кроме того, чтобы получить функцию appendChild, сначала необходимо получить доступ к nativeElement.

Следующий код должен работать:

  readfiles(files){
    var reader = new FileReader();
    reader.onload =  (event) =>{
      console.log('readfiles event ===== ',event);
      var image = new Image();
      var fileReader = event.target as FileReader;
      image.src = fileReader.result;
      image.width = 50; 
      this.imageDrop.nativeElement.appendChild(image);
    };
    reader.readAsDataURL(files[0]);
  }