Можно ли отправить FormData вместе с файлом изображения в веб-API из приложения Angular 6?

Question

Можно ли передать данные формы вместе с файлом изображения в веб-API из приложения angular 6.

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
}

Может кто-нибудь помочь мне решить эту проблему.

Answer 1

Вы можете использовать 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

Answer 2

Вы можете использовать сервис 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)
      }
  }

Answer 3

Чтобы объединить два объекта в один, вы можете просто сделать что-то вроде:

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

Основная проблема, которую вы представляете, состоит в том, что HTTP имеет ограничение на количество данных, которые вы можете POST.Чтобы обойти это, вам нужно установить заголовок Content-Type на «multipart / form-data».Это означает, что для передачи всех данных потребуется несколько поездок HTTP на сервер, поэтому объединение данных, как представляется, не является необходимым, но если вам необходимо