[英]sending multipart/form-data POST API requests in angualr
我通过多部分请求发送图像和其他表单数据。 当我使用 PostMan 调用 api 时,图像已成功添加。 但是当我使用 angular 代码调用相同的 API 时,我从后端收到错误。
组件.ts
addOffer() {
this.formData = new FormData();
this.formData.append('promotion', this.file, this.file.name);
this.formData.append("main_text", this.offerAddForm.controls['title'].value);
this.formData.append("type", '1');
this.formData.append("footer_text", 'rdy');
this._addOfferService.addOffer(this.formData)
.pipe(first())
.subscribe(
data => {
console.log("Yo yo "+data);
},
error => {
console.log("An Error Occurred add notify ", error);
});
}
服务.ts
addOffer(formData) {
const token = this.authService.getToken();
let headerOptions = new HttpHeaders({
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer '+token
});
const url = environment.baseURL + 'promotions';
return this.http.post<any>(url, formData, {headers: headerOptions})
.pipe(map(response => {
return response;
}));
}
更新:来自后端的错误:
无效的促销类型。
请求有效载荷:
我在这里做错了什么?
let urlSearchParams = new URLSearchParams();
urlSearchParams.append('cc', this.PayElement.CC);
// alert(urlSearchParams.toString());
this.appService.sendToOtherService('https://dddddd?ggg=dfdf&ddgg=5555,
urlSearchParams.toString()).then(res2 => {
//
}).catch(res3 => {
//
});
sendToOtherService(url: string, data: any): Promise<any> {
let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
let options = new RequestOptions({headers: headers});
return this.http.post(url, data, options).toPromise()
.then(response => response.json() as any)
.catch(this.handleError);
}
在 HTML 中
<div>
<input hidden id="input-file-id" (change)="sendFile($event)" type="file" />
<label for="input-file-id" class="btn btn-warning ">
<img class="mr-3" src="assets/images/choose_file.png" alt="cloud"> Choose
Files</label>
<p style="color: tomato;">{{isErr}}</p>
<div class="row col-md-12 mt-3 ml-0 pt-4 pb-4" style="border: 2px solid #fbbc04">
<div class="col-md-9" id="wrap">
<span>{{ fileName }}</span>
<audio id="buzzer" controls>
<source [src]="audioSrc" id="wav_src" type="audio/wav" />
<source [src]="audioSrc" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
在控制器/组件中
sendFile(event) {
this.isErr='';
let fileList: FileList = event.target.files;
if (fileList.length > 0) {
let file: File = fileList[0];
console.log(file);
console.log(file.name);
this.fileName = file.name;
this.fileSize = file.size;
this.audioSrc = URL.createObjectURL(file);
$("#buzzer").attr("src", this.audioSrc);
this.yourServiceObj.sendAudioService(file)
.subscribe(data => {
this.serviceResponse = data;
},
error => {
this.isErr='Something went wrong! Please try after sometime';
});
}
}
服务中
sendAudioService(blob) {
this.apiUrl = 'your api url';
var data = new FormData();
data.append("audio", blob);
return this.http.post(this.apiUrl, data, {responseType: 'text'})
.pipe(map(response => {
return response;
}));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.