angular - 是否可以将 FormData 与图像文件一起从 Angular 6 应用程序发送到 Web API
问题描述
是否可以将表单数据与图像文件一起从 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);
});
}
服务.ts
CreateNewComitteeMember(mFormData,mImage){
// here how can I merge the mFormData and mImage and pass it to the web API
}
谁能帮我解决这个问题。
解决方案
你可以在这里使用 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)
}
推荐阅读
- c++ - 未定义对“IoTHubClient_LL_UploadToBlob_Destroy”的引用
- kubernetes - Kubernetes 就绪 (http) 探测失败,但没有就绪状态 (http) 工作正常
- php - PHP Word 发回不可读的文件
- architecture - Verilog中的浮点乘法问题
- python - 每次重新运行时将scrapy导出为没有标题的csv
- android - Sqlite 的 sum() 函数在房间持久性库中似乎无法正常工作
- java - 将spring数据JpaSpecificationExecutor与分页和@Query结合起来
- javascript - 用于在 Google Data Studio 中操作数据的 Google App Script API
- python-3.x - 搜索所有引用的对象 id
- autodesk-forge - 使用 GPS 坐标将自定义对象放入查看器空间