Javascript Angular2-使用文件添加Json

我正在尝试在angular2应用程序中上载文件。目前我正在使用指令，它可以用于上传文件。但是，我还想将JSON对象与文件一起上传。有点像这样

{username:"john",file:file}

我不知道如何实现这个功能。如果需要，我愿意改变API。这是我目前拥有的，也可以在网上的示例中找到

fetch-datat.ts

import * as ng from '@angular/core';
import { Http } from '@angular/http';
import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
const URL = 'http://localhost:5000/api/SampleData/upload';

@ng.Component({
  selector: 'fetch-data',
  directives: [FileSelectDirective, FileDropDirective],  
  template: require('./fetch-data.html')
})

export class FetchData {
  public uploader:FileUploader = new FileUploader({url: URL});
  public hasBaseDropZoneOver:boolean = false;
  public hasAnotherDropZoneOver:boolean = false;
  constructor(){
    console.log(this.uploader); 
  }
  public fileOverBase(e:any):void {
    this.hasBaseDropZoneOver = e;
  }

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

fetch-data.html

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href>Angular2 File Upload</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <h3>Select files</h3>
            <div ng2FileDrop
                 [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                 (fileOver)="fileOverBase($event)"
                 [uploader]="uploader"
                 class="well my-drop-zone">
                Base drop zone
            </div>
            <div ng2FileDrop
                 [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
                 (fileOver)="fileOverAnother($event)"
                 [uploader]="uploader"
                 class="well my-drop-zone">
                Another drop zone
            </div>
            Multiple
            <input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>
            Single
            <input type="file" ng2FileSelect [uploader]="uploader" />
        </div>
        <div class="col-md-9" style="margin-bottom: 40px">
            <h3>Upload queue</h3>
            <p>Queue length: {{ uploader?.queue?.length }}</p>
            <table class="table">
                <thead>
                <tr>
                    <th width="50%">Name</th>
                    <th>Size</th>
                    <th>Progress</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of uploader.queue">
                    <td><strong>{{ item?.file?.name }}</strong></td>
                    <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                    <td *ngIf="uploader.isHTML5">
                        <div class="progress" style="margin-bottom: 0;">
                            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                        </div>
                    </td>
                    <td class="text-center">
                        <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                        <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                        <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                    </td>
                    <td nowrap>
                        <button type="button" class="btn btn-success btn-xs"
                                (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                            <span class="glyphicon glyphicon-upload"></span> Upload
                        </button>
                        <button type="button" class="btn btn-warning btn-xs"
                                (click)="item.cancel()" [disabled]="!item.isUploading">
                            <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                        </button>
                        <button type="button" class="btn btn-danger btn-xs"
                                (click)="item.remove()">
                            <span class="glyphicon glyphicon-trash"></span> Remove
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
            <div>
                <div>
                    Queue progress:
                    <div class="progress" style="">
                        <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
                    </div>
                </div>
                <button type="button" class="btn btn-success btn-s"
                        (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                    <span class="glyphicon glyphicon-upload"></span> Upload all
                </button>
                <button type="button" class="btn btn-warning btn-s"
                        (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
                </button>
                <button type="button" class="btn btn-danger btn-s"
                        (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                    <span class="glyphicon glyphicon-trash"></span> Remove all
                </button>
            </div>
        </div>
    </div>
</div>

选择文件
底降区
另一个下降区
倍数


单身
上载队列
队列长度：{{uploader？.Queue？.length}

名称
大小
进展
地位
行动
{{item？.file？.name}
{{item？.file？.size/1024/1024 |编号：'.2'}}MB
上传
取消
去除
队列进度：
全部上传
全部取消
全部删除

您应该能够随文件一起提交表单数据。它不是json，但你可以从服务器端检索它。我该怎么做？我看不到ng2文件上传的方法。但ng2上传有一种方法。。如果这有帮助的话，我还看到有人回答了你的问题，并对ng2文件上传github repo提出了问题，我最终找到了一种上传文件并在同一请求中发送一些JSON的正确方法，并在这里给出了正确的答案：