Angular 2多部分AJAX上传

我正在使用Angular 2和Spring MVC。我目前有一个上传组件，它对Spring后端进行AJAX调用，并从.csv文件返回解析数据的响应

export class UploadComponent {

uploadFile: function(){

var resp = this;

var data = $('input[type="file"]')[0].files[0];
this.fileupl = data;
var fd = new FormData();
fd.append("file", data);
$.ajax({
url: "uploadFile",
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function(response) {
resp.response = response;
},
error: function(jqXHR, textStatus, errorMessage) {
console.log(errorMessage);
}
});
};
}

---

这是有效的，我得到了一个有效的回复；然而，是否有一种更具角度的方法将此文件传递给Spring并接收响应？我一直在考虑创建一个可注入服务并使用subscribe，但我一直在努力获得回复，最后我做了以下工作：

import { Component, Injectable } from '@angular/core';
import { Observable} from 'rxjs/Rx';
const URL = 'myuploadURL';

@Component({
  selector: 'upload',  
  templateUrl: 'upload.component.html',
  styleUrls: ['upload.component.css']
})

export class UploadComponent {

filetoUpload: Array<File>;
response: {};

constructor() {
  this.filetoUpload = [];
}

upload() {
        this.makeFileRequest(URL, [], this.filetoUpload).then((result) => {           
            this.response = result;            
        }, (error) => {
            console.error(error);
        });
    }
fileChangeEvent(fileInput: any){
        this.filetoUpload = <Array<File>> fileInput.target.files;
    }

    makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
        return new Promise((resolve, reject) => {
            let formData: any = new FormData();
            let xhr = new XMLHttpRequest();
            for(let i =0; i < files.length; i++) {
                formData.append("file", files[i], files[i].name);                
            }            

            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        resolve(JSON.parse(xhr.response));                        
                    } else {
                        reject(xhr.response);
                    }
                }
            };
            xhr.open("POST", url, true);
            xhr.send(formData);
        });
    }

}

从'@angular/core'导入{Component，Injectable}；
从'rxjs/Rx'导入{Observable}；
const URL='myuploadURL'；
@组成部分({
选择器：“上传”，
templateUrl:'upload.component.html'，
样式URL:['upload.component.css']
})
导出类上载组件{
filetoUpload：数组；
答复：{}；
构造函数（）{
this.filetoUpload=[]；
}
上传（）{
this.makeFileRequest（URL，[]，this.filetoUpload）。然后（（结果）=>{
这个。反应=结果；
}，（错误）=>{
控制台错误（error）；
});
}
fileChangeEvent（fileInput:any）{
this.filetoUpload=
检查此答案，了解如何上载文件的示例
<div class="input-group">
                <input type="file" id="file" name="file" placeholder="select file" (change)="fileChangeEvent($event)">

                <input type="submit" value="upload" (click)="upload()" class="btn btn-primary">
        </div>


    <div *ngIf="response">

    <div class="alert alert-success" role="alert">
    <strong>{{response.myResponseObjectProperty | number}}</strong> returned successfully!
    </div>