如何为 angular2 创建拖放上传

Question

我看到了大量的部分信息，但没有任何内容可以解释如何将拖放上传添加到 angular2 的完整过程。我查看了 ng2-file-upload 和 angular2-file-drop 和 file-droppa。它们都非常容易让前端工作，但在后端没有解释就不可能完全实现。

我最近的尝试是使用 file-droppa。我真的很喜欢这个的外观和感觉。 (https://github.com/ptkach/fileDroppa)

所以我已经部署了这么多，我可以将图像拖到拖放区，看到缩略图显示并点击上传所有文件按钮。我缺少的是在我的应用程序后端获取有关文件的任何信息所需的魔法，以便能够实际上传它并对其进行任何操作。

我在后端使用 NodeJS。 /upload 的方法被调用，但没有任何东西被传递给它。

有人知道怎么做吗？

assets.component.ts

import FileDroppa from 'file-droppa/components/Directives/FileDroppa';
@Component({
  moduleId: module.id,
  selector: 'pc-assets',
  templateUrl: 'assets.component.html',
  styleUrls: ['assets.component.css'],
  directives: [FILE_UPLOAD_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES, FileDroppa]   
})

export class AssetsComponent implements OnInit {
  @Input() asset:Asset;
  @Input() uploads: Upload[];

  constructor(private assetService: AssetService,
              private errorService: ErrorService,
              private http: Http,
              private formBuilder:FormBuilder,
              private uploadFileService: UploadFileService) { }

  assets: Asset[] = [];
  selectedAsset: Asset;
  assetFilesToUpload: Array<File>;
  assetUploaded = false;
  assetUploadFile: any;
  assetUploadObject: any;
  uploadFile: any;

  assetFileChangeEvent(fileInput: any){
    this.assetFilesToUpload = <Array<File>> fileInput.target.files;
  }

  fileUploaded(success, response, file){
    success && console.log("uploaded - awesome", response, file);
    success || console.log("not uploaded - very bad", response, file);
  }
}

assets.component.html

  <fileDroppa
    [url]="'http://localhost:3000/upload'"
    [showFilesList]="true"
    (fileUploaded)="fileUploaded($event)"
  >
    <!--<h1>-->

    <!--You can pass anything you want here-->
    <!--You can set you own file list here-->
    <!--</h1>-->
  </fileDroppa>

Answer 1

你可以使用node的ngx-file-drop包来实现拖放功能：

听到的是链接：ngx-file-drop

使用示例文档非常容易。