Node.js 如何为angular2创建拖放上载

我已经看到了大量的部分信息，但是没有任何东西能够解释如何向angular2添加拖放上传的完整过程。我已经研究了ng2文件上传和angular2文件放置和文件放置。它们都很容易让前端工作，但是没有后端的解释就不可能完全实现

我最近的一次尝试是使用文件droppa。我真的很喜欢这件的外观和感觉。（）

因此，我部署了它，这样我就可以将图像拖到拖放区，看到缩略图显示，然后单击上载所有文件按钮。我所缺少的是在我的应用程序后端获得有关该文件的任何信息所需的魔力，以便能够实际上载该文件并对其执行任何操作

我在后端使用NodeJS。调用了/upload的方法，但没有向其中传递任何内容

有人知道怎么做吗

资产.组件.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);
  }
}

从'file droppa/components/Directives/FileDroppa'导入FileDroppa；
@组成部分({
moduleId:module.id，
选择器：“pc资产”，
templateUrl:'assets.component.html'，
样式URL:['assets.component.css']，
指令：[文件上传指令，NgClass，NgStyle，核心指令，表单指令，FileDroppa]
})
导出类AssetComponent在单元上实现{
@输入（）资产：资产；
@Input（）上传：上传[]；
建造商（专用资产服务：资产服务、，
私人errorService:errorService，
私有http:http，
私有formBuilder:formBuilder，
专用uploadFileService:uploadFileService{}
资产：资产[]=[]；
所选资产：资产；
assetFilesToUpload：数组；
assetupload=false；
assetUploadFile：任意；
assetUploadObject：任意；
上传文件：任意；
assetFileChangeEvent（文件输入：任意）{
this.assetFilesToUpload=fileInput.target.files；
}
文件上载（成功、响应、文件）{
success&&console.log（“upload-awesome”，响应，文件）；
成功| | console.log（“未上传-非常糟糕”，响应，文件）；
}
}

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>

---

您可以使用节点的ngx文件拖放包实现拖放功能：

这是一个链接：

---

通过示例编写文档非常简单。

您可以使用节点的ngx文件拖放包来实现拖放功能：

这是一个链接：

使用示例编写文档非常简单