angular - 文件删除上传数据传输为空Angular 2

Question

我正在尝试创建简单的拖放式文件上传流程。但实际上我无法从事件中获取数据传输。

文件列表总是空的。有人可以帮我吗？我不知道我到底做错了什么。非常感谢您的帮助。

这是 Plunker 的例子。

附言抱歉，我无法发布正常的链接 View ，因为有提示:链接应该是代码。

[演示][1]

[1]: https://plnkr.co/edit/tfRHBg7P6QUGDHqWp2TL?p=preview

附言更新。我发现了一个有趣的事情。 在直接数据传输中，我可以看到文件列表是空的。但是当我尝试迭代它时……它起作用了。我可以看到我的文件。怎么解释呢？我上传了我的木板，这样你就可以检查它了。这很奇怪。

public t_fileDrop(e): void {


e.stopPropagation(); // Stops some browsers from redirecting.
    e.preventDefault();
    console.log("DROP =>", e);
    console.log("e.dataTransfer =>", e.dataTransfer);

    console.log(e.dataTransfer.getData("image/jpeg"));

    var files = e.dataTransfer.files;
    for (var i = 0, f; f = files[i]; i++) {
      console.log(f); // Here I can see my dropped file! :)
    }
   }

Answer 1

Angular 中的简单解决方案是通过扩展运算符复制数组。

onDrop(event) {
    const files = [...event.dataTransfer.files];
    console.log(files);
    if (files.length > 0) {
      this.fileDropped.emit(files);
    }
}