是否可以将 FormData 与图像文件一起从 Angular 6 应用程序发送到 Web API
is that possible to send FormData along with Image file to web API from Angular 6 application
是否可以将表单数据连同图像文件一起从 angular 6 应用程序传递到 Web api。
app.component.ts
onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
this.imageToUpload = event.target.files[0];
const reader = new FileReader();
reader.onload = e => this.selectedImage = reader.result.toString();
this.fileName = event.target.files[0].name;
reader.readAsDataURL(this.imageToUpload);
}
}
createNewComitteeMember() {
var mServiceObject = {
ComitteeMemberName: this.comittee_Member_Name.value,
ComitteeMemberNumber: this.comittee_Member_Number.value,
ComitteeMemberType: this.comittee_Type.value,
ComitteeMemberTypeOthers: this.comittee_Type_Others.value,
ComitteeMemberPosition: this.comittee_Member_Position.value,
ComitteeMemberPositionOthers: this.comittee_Member_Position_Others.value,
ComitteeMemberStatus: this.comittee_Member_Status.value
}
this.dmlService.CreateNewComitteeMember(mServiceObject, this.imageToUpload ).subscribe(data => {
console.log(data);
});
}
service.ts
CreateNewComitteeMember(mFormData,mImage){
// here how can I merge the mFormData and mImage and pass it to the web API
}
谁能帮我解决这个问题。
要将两个对象合并为一个对象,您可以简单地执行以下操作:
createNewComitteeMember(mFormData, mImage) {
mFormData['image'] = mImage;
}
您所呈现内容的主要问题是 HTTP 对您可以访问的数据量有限制 POST。要解决这个问题,您需要将 Content-Type Header 设置为 'multipart/form-data'。这意味着需要 HTTP 多次访问服务器才能获得所有数据,因此将数据组合在一起似乎没有必要,但如果必须
您可以在这里使用 FormData
CreateNewComitteeMember(mFormData,mImage){
const HttpUploadOptions = {
headers: new HttpHeaders({ "Content-Type": "multipart/form-data"})
}
const formData = new FormData();
formData.append('data', mFormData);
formData.append('image', mImage);
return this.httpClient.post(url, formData, HttpUploadOptions)
}
有关FormData
的更多信息
您可以使用 FormData
服务:
checkdata(selectedFile:File){
let httpheader = new HttpHeaders();
let options={
headers: httpheader
};
const uploadData = new FormData();
uploadData.append('File', selectedFile, selectedFile.name);
return this.http.post('uri',uploadData,options)
}
组件:
onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
this.imageToUpload = event.target.files[0];
this.Yourservice.checkdata(this.imageToUpload)
}
}
你可以试试这个对我有用的方法
const formdata = new FormData();
formdata.append("userData", this.userData.value);
formdata.append("image", this.uploadedFile.value);
是否可以将表单数据连同图像文件一起从 angular 6 应用程序传递到 Web api。
app.component.ts
onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
this.imageToUpload = event.target.files[0];
const reader = new FileReader();
reader.onload = e => this.selectedImage = reader.result.toString();
this.fileName = event.target.files[0].name;
reader.readAsDataURL(this.imageToUpload);
}
}
createNewComitteeMember() {
var mServiceObject = {
ComitteeMemberName: this.comittee_Member_Name.value,
ComitteeMemberNumber: this.comittee_Member_Number.value,
ComitteeMemberType: this.comittee_Type.value,
ComitteeMemberTypeOthers: this.comittee_Type_Others.value,
ComitteeMemberPosition: this.comittee_Member_Position.value,
ComitteeMemberPositionOthers: this.comittee_Member_Position_Others.value,
ComitteeMemberStatus: this.comittee_Member_Status.value
}
this.dmlService.CreateNewComitteeMember(mServiceObject, this.imageToUpload ).subscribe(data => {
console.log(data);
});
}
service.ts
CreateNewComitteeMember(mFormData,mImage){
// here how can I merge the mFormData and mImage and pass it to the web API
}
谁能帮我解决这个问题。
要将两个对象合并为一个对象,您可以简单地执行以下操作:
createNewComitteeMember(mFormData, mImage) {
mFormData['image'] = mImage;
}
您所呈现内容的主要问题是 HTTP 对您可以访问的数据量有限制 POST。要解决这个问题,您需要将 Content-Type Header 设置为 'multipart/form-data'。这意味着需要 HTTP 多次访问服务器才能获得所有数据,因此将数据组合在一起似乎没有必要,但如果必须
您可以在这里使用 FormData
CreateNewComitteeMember(mFormData,mImage){
const HttpUploadOptions = {
headers: new HttpHeaders({ "Content-Type": "multipart/form-data"})
}
const formData = new FormData();
formData.append('data', mFormData);
formData.append('image', mImage);
return this.httpClient.post(url, formData, HttpUploadOptions)
}
有关FormData
的更多信息您可以使用 FormData
服务:
checkdata(selectedFile:File){
let httpheader = new HttpHeaders();
let options={
headers: httpheader
};
const uploadData = new FormData();
uploadData.append('File', selectedFile, selectedFile.name);
return this.http.post('uri',uploadData,options)
}
组件:
onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
this.imageToUpload = event.target.files[0];
this.Yourservice.checkdata(this.imageToUpload)
}
}
你可以试试这个对我有用的方法
const formdata = new FormData();
formdata.append("userData", this.userData.value);
formdata.append("image", this.uploadedFile.value);