Javascript 如何以角度显示拖放图像的预览？

我试图显示一个图像的预览，它是以角度拖放的

hospital.component.html

<tab heading="Gallery">

          <div id="drop_zone" (drop)="dropHandler($event)" (dragover)="onDragover($event)">
            <p>drag one or more files to this dropzone</p>
            <img src="" id="imgPreview">
          </div>
</tab>

将一个或多个文件拖动到此dropzone

医院

 dropHandler(ev){
    console.log("file dropped");
    ev.preventDefault();
    let dataTransfer = ev.dataTransfer.getData('data');
   this.imagepreview= <HTMLImageElement>document.getElementById('imgPreview');
    this.imagepreview.src=ev.target.result;

  }
  onDrop(event){
    event.preventDefault();
     console.log("drag and dropped file");
  }
  onDragover(event){
    event.stopPropagation();
    event.preventDefault();
  }

dropHandler（ev）{
log（“文件已删除”）；
ev.preventDefault（）；
让dataTransfer=ev.dataTransfer.getData（'data'）；
this.imagepreview=document.getElementById（'imgPreview'）；
this.imagepreview.src=ev.target.result；
}
昂德罗普（事件）{
event.preventDefault（）；
log（“拖放文件”）；
}
昂德拉戈弗（事件）{
event.stopPropagation（）；
event.preventDefault（）；
}

---

当我将图像拖放到拖放区域时，Image src属性将更改为。如何在angular中获取选定图像的url？

为什么不使用cdkDragPreview？为什么不使用cdkDragPreview？