typescript 在 Angular2 中构建 multipart/form-data POST 请求并验证输入类型文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36900989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Build multipart/form-data POST request in Angular2 and validate Input type File
提问by Gabe O'Leary
I have an image (base64) that I need to send via a POST request (and wait for the response). The POST request needs to be of Content-Type:multipart/form-data.
The image needs to be of Content-Type: image/jpg
我有一个图像 (base64)，我需要通过 POST 请求发送它（并等待响应）。POST 请求需要是Content-Type:multipart/form-data. 图像需要是Content-Type: image/jpg
The POST request should look like:
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
With the binary image data as the content body.
以二进制图像数据为内容主体。
I'm attempting to use the Http Post method of angular 2, but I'm not quite sure about how to generate the request. This is what I have:
我正在尝试使用 angular 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
});
I can tell that I am missing part of it but I am not sure what I need to do to give the binary image data it's Content-Disposition & Type etc.
我可以说我遗漏了其中的一部分，但我不确定我需要做什么才能为二进制图像数据提供内容配置和类型等。
回答by mayur
Form template
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
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;
}
};
}
回答by Gabe O'Leary
Similar to this question here: Angular 2 - Post File to Web API
类似于这里的这个问题：Angular 2 - Post File to Web API
Angular2 does not yet support multipart/form-data POST requests, so I decided to use jQuery instead to implement it, and then convert it to an RxJs Observable (subject) to have the same type as what the http.post function in Angular2 should have:
Angular2 尚不支持 multipart/form-data POST 请求，所以我决定使用 jQuery 来实现它，然后将其转换为 RxJs Observable（主题）以具有与 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;
回答by Alessandro
Please check this working example (not mine): https://plnkr.co/edit/ViTp47ecIN9kiBw23VfL?p=preview
请检查这个工作示例（不是我的）：https: //plnkr.co/edit/ViTp47ecIN9kiBw23VfL?p=preview
1 - Don't change or set the Content-Type
1 - 不要更改或设置 Content-Type
2 - Use FormData to send parameters
2 - 使用 FormData 发送参数
3 - Add this to app.module.ts:
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');
}
}
