アップロードされたExcelファイルをAngular 4を使用してC＃Post APIに送信する方法

Question

var fd = new FormData(); 
fd.append('file', data.target.files[0]); 
return this.http.post(url), fd).map().catch(); 

AngularJSを使用すると動作しますが、同じ方法で使用している場合は角度4になります。アップロード中にディスクエラーが発生します。 。

Answer 1

public importMassUpdateExcel(file: FormData, id): Observable<any> { const headers = new Headers({ 'Authorization': '',//authorization token 'Content-Type': 'application/json; charset=UTF-8'// }); const options = new RequestOptions({ headers: headers }); return this.http .post(url, file, options) .map() .catch(); }

Answer 2

ここでは、FormData経由でAPIにファイルをアップロードする例を示します。

upload.service.tsなどのサービスファイルでは、POSTメソッドを使用してファイルをアップロードする機能を作成する必要があります。ここでは、この関数の例です。

getUploadHeaders() { 
    let headers = new Headers({'Accept': 'application/json'}); 
    headers.delete('Content-Type'); 
    return headers; 
}  

addNewPost(newPost: FormData): Observable<FormData> { 
    const endpoint = 'https://yourApiUrl.com'; 
    return this.http 
     .post(endpoint, newPost, { headers: this.getUploadHeaders() }) 
     .catch((e) => this.handleError(e)); 
} 

そして今、あなたは、たとえばupload.component.tsのために、あなたのコンポーネントにアップロード機能を作成する必要があります。 FormDataを使用したアップロード機能の例を次に示します。

fileToUpload: File = null; 

constructor(private uploadService: UploadService) { } 

handleFileInput(files: FileList) { 
    this.fileToUpload = files.item(0); 
} 


saveFileToApi() { 
    const saveForm: FormData = new FormData();  
    if (this.fileToUpload) { 
    saveForm.append('fileFieldNameOnYourApi', this.fileToUpload, this.fileToUpload.name); 
    } 

    this.uploadService.addNewPost(saveForm).subscribe(() => { 
    console.log('Upload success!'); 
    }, error => { 
    console.log('Upload failed!'); 
    }); 
} 

FormData経由でファイルをアップロードするには、APIエンドポイントのpropertyName、このファイルのファイル名、および3つのパラメータが必要です。 そして、あなたのupload.component.htmlに、あなたがこのような形持っている必要がありますいるFormDataの詳細について

<form (ngSubmit)="onSubmit()">  
    <label for="fileField">Chose file to upload</label> 
    <input type="file" 
      id="fileField" 
      name="fileField" 
      (change)="handleFileInput($event.target.files)"> 
    <button type="submit">Speichern</button> 
</form> 

）がthisとFormData.append（詳細については、を読んをお読みください。サービスで