带有角度4的Dropzone js

Question

之前有人用过 angular 2 或 4 的 dropzone Js 库吗？ 如果有一些有用的例子或链接 谢谢

Answer 1

Dropzone 有一个 Angular 5+ 包装器，可以在 here 找到。

Answer 2

也许有点晚了，经过一些研究，我发现这些信息可以让 dropzone 5.0.2 与 Angular 5 一起工作：

• 将 dropzone.js 库放在 src/js/ 下（如果尚未创建，请创建 js 目录）
• 在.angular-cli.json的脚本列表中添加js/dropzone.js

• 如here 所述，在 cmd/shell 中运行以下命令，位于 Angular 项目的根目录（.angular-cli.json 所在的位置）：

  npm install --save @types/dropzone
  

• 现在你可以像这样在你的 typescript 类中导入 dropzone：

  import * as dropzone from 'dropzone';
  

您也可以将其集成为 Angular 组件（Angular 2+），就像 this article 中描述的那样。

警告：我没有对其进行测试，因此，可能缺少某些内容或错误。我终于使用了另一个库。

Answer 3

如果您没有绑定到 dropzone.js，因为它没有针对 Angular 进行优化，我可能会向您推荐以下库。

我编写了一个高度可定制的 Angular 组件，它实现了拖放行为。它返回一个已删除文件的列表作为输出事件。
这可以找到here。

导入模块后，您可以访问组件：

<ngx-dropzone [multiple]="false" [maxFileSize]="2000"></ngx-dropzone>

您可以设置一些选项，并且它具有不错的默认样式（可以在 GitHub 存储库中找到屏幕截图）。如果您愿意，您甚至可以使用您自己的 div 容器和您的自定义样式和悬停效果，并将其放入 dropzone。可以在 API 描述中找到这方面的详细信息。

<ngx-dropzone [customContent]="customDropzone" (filesDropped)="onFilesDropped($event)">
<ng-template #customDropzone>
    <div class="custom-dropzone">
        This is my custom content
    </div>
</ng-template>