时间戳

首页 > 解决方案 > 使用 Angular6 将图像拖放到 div 中并显示预览

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

问题描述

我想将图像拖放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？谢谢

标签： angularhtmldrag-and-dropangular6

解决方案

您应该指定的类型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]);
  }

推荐阅读