如何使用 Angular CDK 拖放库上传文件答案

【问题标题】：How to use Angular CDK Drag and Drop library to upload files如何使用 Angular CDK 拖放库上传文件
【发布时间】：2021-03-25 09:05:57
【问题描述】：

我有一个自定义的角度文件上传组件，我想使用Angular CDK drag&drop。它看起来不错，但是当我尝试实现它来处理文件上传（将文件拖到 dropzone 中）时，它似乎不起作用，浏览器会在新选项卡中打开文件。

我现在的样子是这样的：

<label cdkDropList (cdkDropListDropped)="handleFileDrop($event)">
    <span>Drop file here</span>
    <input #fileInput type="file" multiple="false" (change)="addFiles(fileInput.files">
</label>

所以我的问题是，我可以使用 Angular CDK 拖放库进行文件上传吗？如果可以，我在这里缺少什么？

【问题讨论】：

标签： angular drag-and-drop angular-cdk angular-cdk-drag-drop

【解决方案1】：

据我所知，你不能。

拖放文件会触发与拖放标记有 CDK CdkDrag 指令的元素不同的事件（即DragEvent）。

因此，您必须参考旧的 dragenter / dragleave / drop 事件并手动处理逻辑（即从事件的 dataTransfer 属性中添加文件，可能在 dragenter / dragleave 等期间更改样式。

【讨论】：