时间戳

首页 > 解决方案 > 无法使用 FileReader 读取拖放文件

javascript - 无法使用 FileReader 读取拖放文件

问题描述

我正在尝试通过将图像拖放到页面上的特定 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;
}

标签： javascriptangularhtmltypescriptangular6

解决方案

您实际上已成功将文件传递给onDrop事件。只是在执行时您看不到它，因为继承的属性和不可枚举的属性被忽略了，正如本讨论console.log(JSON.stringify(event));中所指出的那样。

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

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

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

推荐阅读