如何在 Http POST 请求正文中发送图像文件以及其他表单数据 angular 5. 后端正在 Laravel 中使用干预包
How shall I send an image file in body of Http POST request in along with other form data angular 5. Backend is using Intervention package in Laravel
This is the postman data
这是我尝试实现的
@ViewChild('imageUpload') elem: ElementRef;
fetchImage() : File{
const Imagefiles = this.elem.nativeElement
this.profileImagefile = Imagefiles.files[0];
console.log("ProfileImage",this.profileImagefile)
return this.ProfileImagefile;
}
addUser(createAgent: NgForm) {
const formData: FormData = new FormData(createAgent.value);
formData.append("image", this.fetchImage(), this.fetchImage().name)
console.log("formData",formData)
console.log('formvalue', createProfile.value);
this.httpService.createProfile(createProfile.value)
.subscribe(....)
在httpService中
createProfile(data: any) {
return this.httpClient.post('agent/', data) }
后端正在使用 php Laravel。对于通过 HTTP POST 发送的表单数据,它会抛出错误。
通过邮递员可以发送数据但不能从前端发送
这样做的正确方法是什么?
谢谢
我是这样做的:
uploadFile(fileType: FileType, file: File): Observable<string> {
let formData: FormData = new FormData();
formData.append('file', file);
formData.append('name', file.name.substring(0, file.name.indexOf(".")));
formData.append('extension', file.name.substring(file.name.indexOf(".") + 1, file.name.length));
formData.append('fileType', fileType);
return this.fileHttpHandler
.uploadFile(formData)
.map(response => response.json())
.catch(error => this.restErrorHandler.handleRestError(error));
}
fileHttpHandler.uploadFile() 看起来像这样:
public uploadFile(formData: FormData): Observable<Response> {
return this.http.post(this.restApiUtilsService.getUrl(this.FILES_API_PATH) + "/save",
formData, this.restApiUtilsService.getMultipartAuthHeaders());
}
在 headers 中,您不必指定诸如 multipart 之类的任何内容 - 它会自动完成。我在那里传递身份验证令牌,这就是 "getMultipartAuthHeaders" 的原因。根本不要在 headers 中指定 Content-Type。
我通过首先获取所有 ngForm 数据并将其附加到表单数据然后将图像文件附加到相同的表单数据来解决问题。
使用 for-in 循环获取 ngForm 数据。
addUser(createAgent: NgForm) {
const formData: FormData = new FormData();
for( let val in createAgent.value ){
formData.append(val, createAgent.value[val])
console.log(val, createAgent.value[val])
}
formData.append("image", this.fetchImage(), this.fetchImage().name);
console.log("formData",formData)
}
然后将这个表单数据发送到后台
This is the postman data
这是我尝试实现的
@ViewChild('imageUpload') elem: ElementRef;
fetchImage() : File{
const Imagefiles = this.elem.nativeElement
this.profileImagefile = Imagefiles.files[0];
console.log("ProfileImage",this.profileImagefile)
return this.ProfileImagefile;
}
addUser(createAgent: NgForm) {
const formData: FormData = new FormData(createAgent.value);
formData.append("image", this.fetchImage(), this.fetchImage().name)
console.log("formData",formData)
console.log('formvalue', createProfile.value);
this.httpService.createProfile(createProfile.value)
.subscribe(....)
在httpService中
createProfile(data: any) {
return this.httpClient.post('agent/', data) }
后端正在使用 php Laravel。对于通过 HTTP POST 发送的表单数据,它会抛出错误。 通过邮递员可以发送数据但不能从前端发送 这样做的正确方法是什么? 谢谢
我是这样做的:
uploadFile(fileType: FileType, file: File): Observable<string> {
let formData: FormData = new FormData();
formData.append('file', file);
formData.append('name', file.name.substring(0, file.name.indexOf(".")));
formData.append('extension', file.name.substring(file.name.indexOf(".") + 1, file.name.length));
formData.append('fileType', fileType);
return this.fileHttpHandler
.uploadFile(formData)
.map(response => response.json())
.catch(error => this.restErrorHandler.handleRestError(error));
}
fileHttpHandler.uploadFile() 看起来像这样:
public uploadFile(formData: FormData): Observable<Response> {
return this.http.post(this.restApiUtilsService.getUrl(this.FILES_API_PATH) + "/save",
formData, this.restApiUtilsService.getMultipartAuthHeaders());
}
在 headers 中,您不必指定诸如 multipart 之类的任何内容 - 它会自动完成。我在那里传递身份验证令牌,这就是 "getMultipartAuthHeaders" 的原因。根本不要在 headers 中指定 Content-Type。
我通过首先获取所有 ngForm 数据并将其附加到表单数据然后将图像文件附加到相同的表单数据来解决问题。 使用 for-in 循环获取 ngForm 数据。
addUser(createAgent: NgForm) {
const formData: FormData = new FormData();
for( let val in createAgent.value ){
formData.append(val, createAgent.value[val])
console.log(val, createAgent.value[val])
}
formData.append("image", this.fetchImage(), this.fetchImage().name);
console.log("formData",formData)
}
然后将这个表单数据发送到后台