[英]sending file and json in POST multipart/form-data request with axios
[英]Build multipart/form-data POST request in Angular2 and validate Input type File
我有一個圖像(base64),我需要通過POST請求發送(並等待響應)。 POST請求必須是Content-Type:multipart/form-data
。 圖像需要是Content-Type: image/jpg
POST請求應如下所示:
POST https://www.url... HTTP/1.1
Content-Type: multipart/form-data; boundary=-------------------------acebdf13572468
User-Agent: Fiddler
Host: www.host.com
Content-Length: 199640
---------------------------acebdf13572468
Content-Disposition: form-data; name="fieldNameHere"; filename="Nikon Digital SLR Camera D3100 14.2MP 2.jpg"
Content-Type: image/jpeg
用二進制圖像數據作為內容體。
我正在嘗試使用角度2的Http Post方法,但我不太確定如何生成請求。 這就是我所擁有的:
let body = atob(imageData);
let headers = new Headers({'Content-Type': 'multipart/form-data'});
let options = new RequestOptions({headers: headers});
this._http.post(url, body, options)
.map(res=>{
//do stuff
});
我可以說我錯過了它的一部分,但我不知道我需要做什么來給二進制圖像數據它的內容 - 處置和類型等。
Form template
<form id="form" name="file" [formGroup]="FileFormGroup"(submit)="addFrom($event, FileFormGroup)" method="post">
<input spellcheck="true" formControlName="Demo" name="Demo" type="text"/>
<input type="file" accept="image/*" id="file" name="File"/>
<input formControlName="File" type="hidden"/>
</form>
Ts
import {FormGroup, FormBuilder, FormControl, Validators} from '@angular/forms';
import {ValidatorFn} from '@angular/forms/src/directives/validators';
public FileFormGroup: FormGroup; /* variable */
constructor(public fb: FormBuilder) {}
ngOnInit() {
this.FileFormGroup = this.fb.group({
Demo: ["", Validators.required],
File: ["", this.fileExtension({msg: 'Please upload valid Image'})]
});
}
public addFrom(event: Event, form: FormGroup): void {
if(form.valid && form.dirty) {
let formTemp: HTMLFormElement <HTMLFormElement>document.querySelector('#form');
let formData: FormData = new FormData(formTemp);
let xhr: XMLHttpRequest = this.foo(formData);
xhr.onreadystatechange = () => {
if(xhr.readyState === 4) {
if(xhr.status === 201) {
console.log("Success");
} else {
console.log("Error");
}
}
}
}}
// Foo function
public Foo(formData){
let url: Foo;
let xhr: XMLHttpRequest = new XMLHttpRequest();
xhr.open('POST', url, true);
// enctype For Multipart Request
xhr.setRequestHeader("enctype", "multipart/form-data");
// IE bug fixes to clear cache
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Cache-Control", "no-store");
xhr.setRequestHeader("Pragma", "no-cache");
xhr.send(formData);
return xhr;
}
/* validation function to check proper file extension */
public fileExtension(config: any): ValidatorFn {
return (control: FormControl) => {
let urlRegEx: RegExp = /\.(jpe?g|png|gif)$/i;
if(control.value && !control.value.match(urlRegEx)) {
this.deleteImg = false;
return {
invalidUrl: config.msg
};
} else {
return null;
}
};
}
與此問題類似: Angular 2 - 將文件發布到Web API
Angular2還不支持multipart / form-data POST請求,所以我決定使用jQuery來實現它,然后將它轉換為RxJs Observable(subject),使其與Angular2中的http.post函數的類型相同有:
//Convert Base64 Representation of jpeg to
let imageData = imageString.split(',')[1];
let dataType = imageString.split('.')[0].split(';')[0].split(':')[1];
let binaryImageData = atob(imageData);
let data = new FormData();
let blob = new Blob([binaryImageData], { type: dataType })
data.append('file', blob);
let deferred = $.ajax({
url: this._imageAPIBaseUrl,
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST'
});
let observable = new AsyncSubject();
//When the Deferred is complete, push an item through the Observable
deferred.done(function () {
//Get the arguments as an array
let args = Array.prototype.slice.call(arguments);
//Call the observable next with the same parameters
observable.next.apply(observable, args);
//Complete the Observable to indicate that there are no more items.
observable.complete();
});
//If the Deferred errors, push an error through the Observable
deferred.fail(function () {
//Get the arguments as an array
let args = Array.prototype.slice.call(arguments);
//Call the observable error with the args array
observable.error.apply(observable, args);
observable.complete();
});
return observable;
請查看此工作示例(不是我的): https : //plnkr.co/edit/ViTp47ecIN9kiBw23VfL?p = preview
1 - 不要更改或設置Content-Type
2 - 使用FormData發送參數
3 - 將其添加到app.module.ts:
import { HttpModule, RequestOptions, XHRBackend, ConnectionBackend, Http, Request, RequestOptionsArgs, Response, Headers } from '@angular/http';
@Injectable()
export class HttpInterceptor extends Http {
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions)
{
super(backend, defaultOptions);
defaultOptions.headers = new Headers();
defaultOptions.headers.append('Content-Type', 'application/json');
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.