是否可以将 FormData 与图像文件一起从 Angular 6 应用程序发送到 Web API

本文介绍了是否可以将 FormData 与图像文件一起从 Angular 6 应用程序发送到 Web API的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

是否可以将表单数据与图像文件一起从 angular 6 应用程序传递到 web api.

Is it possible to pass the form data along with image file to web api from angular 6 application.

appponent.ts

appponent.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: thisittee_Member_Name.value,
    ComitteeMemberNumber: thisittee_Member_Number.value,
    ComitteeMemberType: thisittee_Type.value,
    ComitteeMemberTypeOthers: thisittee_Type_Others.value,

    ComitteeMemberPosition: thisittee_Member_Position.value,
    ComitteeMemberPositionOthers: thisittee_Member_Position_Others.value,
    ComitteeMemberStatus: thisittee_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
}

谁能帮我解决这个问题.

can anyone help me to solve this .

推荐答案

你可以在这里使用 FormData

You can make use of FormData over here

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 与图像文件一起从 Angular 6 应用程序发送到 Web API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！