使用 Angular6 将图像拖放到 div 中并显示预览

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