Angular 2拖放上传

Question

我正在尝试为 angular 2 实现类似于此的拖放上传： http://bootsnipp.com/snippets/featured/bootstrap-drag-and-drop-upload

因为我使用的是 angular 2，所以我想使用 typescript 而不是 jquery。我找到了一个名为 ng2-file-upload 的库，并尝试实现拖放功能；但是，我似乎无法让它工作。这就是我所拥有的：

上传.component.ts

Component({
  selector: 'upload',  
  templateUrl: 'app/components/upload/upload.component.html',
  styleUrls: ['app/components/upload/upload.component.css'],
providers: [ UploadService ]
})
export class UploadComponent {

public uploader:FileUploader = new FileUploader({url: URL});
    public hasBaseDropZoneOver:boolean = false;
    public hasAnotherDropZoneOver:boolean = false;

    public fileOverBase(e:any):void {
        this.hasBaseDropZoneOver = e;
    }

    public fileOverAnother(e:any):void {
        this.hasAnotherDropZoneOver = e;
    }
}

upload.component.html

<section id="dropzone">
    <div class="panel panel-default">

        <div class="panel-body">

            <!-- Standar Form -->
            <h4>Select files from your computer</h4>
            <br>
            <form  enctype="multipart/form-data" id="js-upload-form">
                <div class="form-inline">
                    <div class="form-group">
                        <input type="file" name="files[]" multiple (change)="fileChangeEvent($event)">
                    </div>
                    <button type="submit" class="btn btn-sm btn-primary"  (click)="upload()">Upload files</button>
                </div>
            </form>
</div>
    </div>



            <!-- Drop Zone -->
            <h4>Or drag and drop files below</h4>
        <br>
            <!--<div class="upload-drop-zone" id="drop-zone">-->
                <!--Just drag and drop files here-->
            <!--</div>-->
        <div ng2FileDrop
             [ngClass]="{'another-file-over-class': hasBaseDropZoneOver}"
             (fileOver)="fileOverBase($event)"
             class="well upload-drop-zone">
            Drop Files Here
        </div>
    </section>

upload.component.css

.upload-drop-zone {
    color: #ccc;
    border-style: dashed;
    border-color: #ccc;
    line-height: 200px;
    text-align: center
}
.another-file-over-class {
    border: dashed 3px green;
}

Answer 1

我认为您缺少在html 中绑定上传器。

<div ng2FileDrop
     [ngClass]="{'another-file-over-class': hasBaseDropZoneOver}"
     (fileOver)="fileOverBase($event)"
     [uploader]="uploader"
     class="well upload-drop-zone">
     Drop Files Here
</div>