文件删除上传数据传输为空Angular 2
Posted
技术标签:
【中文标题】文件删除上传数据传输为空Angular 2【英文标题】:File drop upload dataTransfer is empty Angular 2 【发布时间】:2017-03-11 04:00:07 【问题描述】:我正在尝试创建简单的拖放文件上传过程。但实际上我无法从事件中获取数据传输。
文件列表始终为空。有人可以帮我吗?我不知道我到底做错了什么。非常感谢您的帮助。
这是 Plunker 示例。
附:对不起,请,我不能发布正常的链接视图,因为有提示:链接应该是一个代码。
[演示][1]
[1]: https://plnkr.co/edit/tfRHBg7P6QUGDHqWp2TL?p=preview
附:更新。我发现了一件有趣的事情。 在直接 dataTransfer 中,我可以看到文件列表为空。但是当我尝试迭代它时......它起作用了。我可以看到我的文件。怎么解释?我更新了我的木板,所以你可以检查它。很奇怪。
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! :)
【问题讨论】:
event.dataTransfer.files is empty when ondrop is fired?的可能重复 看起来是的。这是同一个问题。谢谢帕特里克! 【参考方案1】:Angular 中的简单解决方案是通过扩展运算符复制数组。
onDrop(event)
const files = [...event.dataTransfer.files];
console.log(files);
if (files.length > 0)
this.fileDropped.emit(files);
【讨论】:
以上是关于文件删除上传数据传输为空Angular 2的主要内容,如果未能解决你的问题,请参考以下文章
值不能为空。 (参数's')尝试将excel文件上传到数据库时