私はAngular,TypeScriptを使用してファイルをJSONデータとともにサーバーに送信しています。Angular - POSTアップロードファイル
以下は私のコードです:
import {Component, View, NgFor, FORM_DIRECTIVES, FormBuilder, ControlGroup} from 'angular2/angular2';
import {Http, Response, Headers} from 'http/http';
@Component({ selector: 'file-upload' })
@View({
directives: [FORM_DIRECTIVES],
template: `
<h3>File Upload</h3>
<div>
Select file:
<input type="file" (change)="changeListener($event)">
</div>
`
})
export class FileUploadCmp {
public file: File;
public url: string;
headers: Headers;
constructor(public http: Http) {
console.log('file upload Initialized');
//set the header as multipart
this.headers = new Headers();
this.headers.set('Content-Type', 'multipart/form-data');
this.url = 'http://localhost:8080/test';
}
//onChange file listener
changeListener($event): void {
this.postFile($event.target);
}
//send post file to server
postFile(inputValue: any): void {
var formData = new FormData();
formData.append("name", "Name");
formData.append("file", inputValue.files[0]);
this.http.post(this.url +,
formData ,
{
headers: this.headers
});
}
}
は、どのように私はStringにformData
を変換し、それをサーバーに送信することができますか? AngularJS(v1)で覚えていますが、transformRequest
を使用します。
var data : {
name: string;
file: File;
} = {
name: "Name",
file: inputValue.files[0]
};
は、その後、あなたがJSON.stringifyでサーバーに送信(データ):いるFormDataクラスも現時点ではサポートされていないため
は、データがthis.http.postラインの前に変換することができないのですか? httpは観測可能であり、オプションを取ります。ソースを検索しようとします(例:https:// github)。com/angular/angular/blob/8ed22ce6e7ce0e00c12b036d02627424c6b4ff35/modules/angular2/src/http/http.ts –
これについて進歩はありましたか? – Canastro
GitHubに関する保留中の機能リクエストがあります。https://github.com/angular/angular/issues/2803 – martin