angular - 防止浏览器在 Angular 中加载拖放文件

Question

我有一个页面(在 Angular 4 中)，其中有一个拖放组件(ng2-filedrop)。拖放工作正常，但是当我拖动一个文件并将其拖放到除拖放组件之外的页面时，它在该页面中打开文件。

有什么方法可以禁用在其他地方放置文件，或者至少可以在单独的浏览器选项卡中打开文件？

Answer 1

您可以通过覆盖 dragover 来做到这一点。和 drop全局盛会window调用 preventDefault() 的对象防止浏览器的默认拖放行为。

将以下代码片段添加到 ngOnInit()你的 app.component.ts 的方法:

ngOnInit(): void {
  window.addEventListener("dragover", e => {
    e && e.preventDefault();
  }, false);
  window.addEventListener("drop", e => {
    e && e.preventDefault();
  }, false);
}

这不是我自己的答案，您可以在 Prevent browser from loading a drag-and-dropped file 看到原始答案和更多讨论。