使用dropzone和Angular 2的简单方法_Angular_Dropzone.js

使用dropzone和Angular 2的简单方法

angular

使用dropzone和Angular 2的简单方法,angular,dropzone.js,Angular,Dropzone.js,我对SystemJS和NGModules有点迷茫，我只是按照说明去做，让它正常工作在的例子中，我尝试在我的头脑中添加dropzone.js/css作为脚本，并在我的表单中添加了类dropzone，但它不起作用，dropzone没有创建任何人都可以向我展示如何在Angular 2最终版本中实现Dropzone？这里是我包装Dropzone.js的一个小组件：首轮 npm安装-保存dropzone 我真的希望这能有所帮助。这里是我包装Dropzone.js的一个小组件：首轮 npm安装-保存

我对SystemJS和NGModules有点迷茫，我只是按照说明去做，让它正常工作

在的例子中，我尝试在我的头脑中添加dropzone.js/css作为脚本，并在我的表单中添加了类dropzone，但它不起作用，dropzone没有创建

任何人都可以向我展示如何在Angular 2最终版本中实现Dropzone？

这里是我包装Dropzone.js的一个小组件：

首轮

npm安装-保存dropzone

我真的希望这能有所帮助。

这里是我包装Dropzone.js的一个小组件：

首轮

npm安装-保存dropzone

我真的希望这能有所帮助。

我是否可以提出以下建议：

let Dropzone=require不再被认为是Angular 2+中的加农炮，我们现在有5个，接近版本6了，我可以建议这样做吗：

let Dropzone=require不再被认为是Angular 2+中的加农炮，我们现在有5个，接近版本6了

使用Angular 6 Angular版本的步骤：6.1.8

一,。使用angular CLI创建angular项目，并从dropzonejs.com网站下载dropzone dist文件夹

二,。将dropzone.css从projects../src/assets/css文件夹中下载的dist文件夹中放入，如果不存在，则在styles.css文件中创建并导入它，如下所示

styles.css
----------

@import "../src/assets/css/dropzone.css";

三,。将下载的dist文件夹文件中的dropzone.js放入projects../src/assets/js文件夹（如果不存在），然后创建并将以下值放入angular.json文件的scripts选项中：

四,。现在，在组件ts文件（例如app.component.ts）中，按照以下方式定义Dropzone及其选项：

app.component.ts
----------------

    import { Component, OnInit } from '@angular/core';

    declare var Dropzone: any;

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {

      ngOnInit(): void {

        Dropzone.options.pdfDropzone = {
          paramName: 'file',
          maxFilesize: 5, // MB
          uploadMultiple: true,
          autoProcessQueue: true,
          init: function () {
              this.on('addedfile', function (file) {
                  const removeButton = Dropzone.createElement('<button class=\'btn btn-sm btn-block\'>Remove file</button>');
                  const _this = this;
                  removeButton.addEventListener('click', function (e) {
                      e.preventDefault();
                      e.stopPropagation();
                      _this.removeFile(file);
                  });

                  file.previewElement.appendChild(removeButton);
              });
          }
      };
      }
    }

五,。现在，在html文件中添加以下div：

app.component.html
------------------

    <div>
        <form action="http://localhost:8080/api/upload/file"
              class="dropzone dz-clickable"
              id="pdf-dropzone">
        </form>
    </div>

表单元素的Action属性是dropzone上载文件的url

它对我有用。干杯