Angular 2 Multipart AJAX Upload

Question

我在Spring MVC中使用Angular 2。我目前有一個Upload組件，它對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並接收響應？我一直在尋找到創建可注射的服務，並使用訂閱，但我一直在努力得到響應

Answer 1

最後我做了以下內容：

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); 
     }); 
    } 

} 

然後我就可以注入的響應我的HTML像：

<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> 

這支持多文件上傳。我在此plunkr中將其創建爲注射服務： https://plnkr.co/edit/wkydlC0dhDXxDuzyiDO3