我想在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
中预览?谢谢
您应该指定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]);
}