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

问题描述 投票:0回答:1

我想在div和同一个div中拖放图像,我想显示该图像的预览。

我创建了一个简单的vanilla 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中预览?谢谢

angular html5 drag-and-drop angular6
1个回答
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]);
  }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.