Невозможно прочитать файл перетаскивания с помощью FileReader

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>

У меня естьвсе события, связанные с удалением, однако я не смог получить изображение из 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));, потому что унаследованные свойства и не перечисляемые свойства не учитываются, как указано в этом обсуждении .

Чтобы получитьИзображение из события вам нужно сделать следующим образом.

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

Смотрите этот stackblitz для полного рабочего примера.