无法使用 FileReader 读取拖放文件答案

【问题标题】：Cannot read drag and dropped file with FileReader无法使用 FileReader 读取拖放文件
【发布时间】：2019-02-21 16:31:48
【问题描述】：

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

【问题讨论】：

标签： javascript angular html typescript angular6

【解决方案1】：

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

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

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

查看stackblitz 了解完整的工作示例。

【讨论】：

好的，感谢您的帮助。我应该如何去显示图像？我正在使用 FileReader.readDataAsUrl() 尝试获取图像的 url，但它似乎不起作用。
@TylerB.Joudrey 它就像我在自己的项目中所做的那样工作。确保定义了reader.onload 事件，并在该事件中设置图像元素的 src 值。另外，如果我的回答对您有用，请接受答案。
我已经定义为reader.onload = e => { this.url = reader.result; console.log(this.url); };
而且网址仍然无法使用，所以我无法接受答案。
@TylerB.Joudrey 如果没有看到它，就很难说出你的代码有什么问题。看看我添加到答案中的 stackblitz 链接，如果您设法通过引用它来让您的代码正常工作，请告诉我。