我需要上传一个文件并发送一些json,我有这个功能:
POST_formData(url, data) {
var headers = new Headers(), authtoken = localStorage.getItem('authtoken');
if (authtoken) {
headers.append("Authorization", 'Token ' + authtoken)
}
headers.append("Accept", 'application/json');
headers.delete("Content-Type");
var requestoptions = new RequestOptions({
method: RequestMethod.Post,
url: this.apiURL + url,
headers: headers,
body: data
})
return this.http.request(new Request(requestoptions))
.map((res: Response) => {
if (res) {
return { status: res.status, json: res.json() }
}
})
}
我的问题是,如果我将 content-type
设置为“multipart/form-data
”,如果我删除 ,我的服务器会提示边界content-type
header ,我的服务器提示它“text/plain
”是受支持的媒体类型。
那么,如何使用 angular2 发送 FormData?
最佳答案
模板:
<label class="btn btn-primary">
<input type="file" style="display: none;" multiple="true" (change)="fileChange($event)" accept=".xml">
<span>Click Me!</span>
</label>
UPD:Angular 5 - HttpClient + Typescript
onFileUpload(event: EventTarget) {
const eventObj: MSInputMethodContext = <MSInputMethodContext>event;
const target: HTMLInputElement = <HTMLInputElement>eventObj.target;
const files: FileList = target.files;
const formData: FormData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('file', files[i]);
}
// POST
this.httpClient.post<AnalyzedData>(uploadUrl, formData).subscribe(...);
}
旧的 Http 库 - Angular 4.3 之前:
fileChange(event) {
let files = event.target.files;
if (files.length > 0) {
let formData: FormData = new FormData();
for (let file of files) {
formData.append('files', file, file.name);
}
let headers = new Headers();
headers.set('Accept', 'application/json');
let options = new RequestOptions({ headers: headers });
this.http.post(uploadURL, formData, options)
.map(res => res.json())
.catch(error => Observable.throw(error))
.subscribe(
data => {
// Consume Files
// ..
console.log('uploaded and processed files');
},
error => console.log(error),
() => {
this.sleep(1000).then(() =>
// .. Post Upload Delayed Action
)
});
}
}
关于angular - 你如何在 Angular 2 中发布一个 FormData 对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37174759/