Question

我正在尝试通过将图像拖放到页面上的特定div上，以允许通过拖放将图像上传到我的网站：

<div class="container" (drop)="onDrop($event)" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)">
    <img id="blah" [src]="url || 'http://placehold.it/180'" alt="your image" />

</div>

我拥有所有与drop相关的事件，但我实际上无法从FileReader获取图像：

我在做什么错？我从控制器获得的与下落相关的功能如下：

onDrop(event) {
    event.preventDefault();
    event.stopPropagation();
    this.file = event.dataTransfer.files[0];
    const reader = new FileReader();
    reader.onload = e => {
        this.url = reader.result;
        console.log(this.url);
    };
    reader.readAsDataURL(this.file);
    this.fileDraggedOverDiv = false;
}

onDragOver(event) {
    event.stopPropagation();
    event.preventDefault();
    this.fileDraggedOverDiv = true;
    return false;
}

onDragLeave(event) {
    event.stopPropagation();
    event.preventDefault();
    this.fileDraggedOverDiv = false;
    return false;
}

Answer 1

您实际上已成功将文件传递给onDrop事件。只是执行console.log(JSON.stringify(event));时您看不到它，因为继承的属性和不可枚举的属性都被排除在this discussion中所指出。

要从事件中获取图像，您需要执行以下操作。

onDrop(event) {
    event.preventDefault();
    const file = event.dataTransfer.files[0];
}

有关完整的工作示例，请参见此stackblitz。

无法使用FileReader读取拖放的文件

1 个答案: