is that possible to send FormData along with Image file to web API from Angular 6 application

问题

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

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
}

can anyone help me to solve this .

回答1:

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)
}

For more info about FormData

回答2:

To merge two objects into one you can simply do something like:

createNewComitteeMember(mFormData, mImage) {
   mFormData['image'] = mImage;
}

The main issue with what you are presenting is that HTTP has a limit to the amount of data you can POST. To get around this you need to set the Content-Type Header to 'multipart/form-data'. This means it will take HTTP multiple trips to the server to get all the data across, so combining the data together seems to be not necessary, but if you must

回答3:

You can use FormData

service:

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)
    }

component:

 onSelectFile(event) {
       if (event.target.files && event.target.files[0]) {
           this.imageToUpload = event.target.files[0];
           this.Yourservice.checkdata(this.imageToUpload)
      }
  }

来源：https://stackoverflow.com/questions/52953317/is-that-possible-to-send-formdata-along-with-image-file-to-web-api-from-angular

标签

angular

typescript

angular6

angular4-forms