Angular2多部分/表單數據作爲純文本/文本發送，無論選項設置如何

Question

我試圖從客戶端向我的服務器發送數據爲multipart/form-data但是服務器始終以純文本格式接收數據。這裏是我的代碼：

import { Component, ElementRef, ViewChild, Injectable } from '@angular/core'; 
import { Http, Headers, RequestOptions } from '@angular/http'; 

@Component({ 
    moduleId: module.id, 
    selector: 'file-upload', 
    templateUrl: 'upload.component.html', 
}) 

@Injectable() 
export class FileUploadComponent { 
    @ViewChild('upload-btn') uploadbtn: any; 
    @ViewChild('inputFile') inputFile: ElementRef; 
    @ViewChild('progressBar') progressBar: any; 

    constructor(private http: Http, private e1: ElementRef) { } 

    /* When button is clicked open input */ 
    upload() { 
     console.log("clicked"); 
     this.inputFile.nativeElement.click(); 
    } // end of upload 

    /* Process input form */ 
    sendToServer() { 
     // Get form input 
     let inputFile: HTMLInputElement = this.inputFile.nativeElement; 
     let formData = new FormData(); 
     let fileCount: number = inputFile.files.length; 
     let headers = new Headers(); 
     headers.append('enctype', 'multipart/form-data'); 
     let options = new RequestOptions({ headers: headers }); 
     console.log(formData); 
     console.log(options); 
     console.log(headers); 


     console.log("File Count: " + fileCount); 

     if (fileCount > 0) { 
      for (let i = 0; i < fileCount; i++) { 
       console.log("Count: " + i); 
       formData.append('uploads[]', inputFile.files.item(i), 
    inputFile.files.item(i).name); 
      } 


      this.http.post('server IP', formData, options) 
      .subscribe(data => console.log("Upload Success!")); 

     } 

} // end of send to server 

} 

我的服務器是IIS，並獲得了來自angular2前端POST請求。

Answer 1

當你從角將文件發送到後臺，你應該通過以下方式發送：

makeFileRequest (params: string[], files: File[], employee:Employee, 
    doctype:string){ 
    return Observable.create(observer => { 
    let formData: FormData = new FormData(), 
     xhr: XMLHttpRequest = new XMLHttpRequest(); 

    formData.append("file", files[0]); 
    formData.append("type", doctype); 
    formData.append("employeeid", employee.id.toString()); 
    let token = localStorage.getItem('jwtToken'); 

    xhr.onreadystatechange =() => { 
     if (xhr.readyState === 4) { 
      if (xhr.status === 200) { 
       // observer.next(JSON.parse(xhr.response)); 
       console.log(xhr.response); 
       observer.next(); 
       observer.complete(); 
      } else { 
       observer.error(xhr.response); 
      } 
     } 
    }; 

    xhr.upload.onprogress = (event) => { 
     this.progress$ = Math.round(event.loaded/event.total * 100); 
     this.progressObserver.next(this.progress$); 
    }; 
    let url = "http://localhost:8080/docapi/documents/upload"; 
    xhr.open('POST', url, true); 
    xhr.setRequestHeader('Authorization', token); 
    xhr.send(formData); 
}); 
} 

以下是relevat功能component.ts：

updateFile(event){ 
    this.files = event.srcElement.files; 
} 
upload() { 
    console.log('onChange'); 
    console.log(this.doctype); 
this.employeeService.makeFileRequest([], this.files, this.employee, this.doctype).subscribe(response => { 
    console.log('sent'); 
    console.log(response); 
}); 

}

我認爲現在還不支持發送它，因爲您只是通過簡單的帖子發送它。你必須做一個XMLHttpRequest並通過它發送你的文件。

最後，希望這有助於。