Отправить поля изображения и формы в API с Angular5

Question

У меня есть форма с 2 полями и 1 полями изображения.

    public frontImageFile : File;

    selectFrontImage(event: any): void{
     if(event.target.files[0]) {      
        this.frontImageFile = event.target.files[0];
     } 
    }

    newCardForm = new FormGroup({
        first_name: new FormControl('')),
        email: new FormControl(''),
        image: new FormControl(''),
    });

    const cardData = new FormData();
    cardData.append('frontImage', this.frontImageFile, this.frontImageFile.name);
    const data = {
        first_name: this.newCardForm.value.first_name,
        email: this.newCardForm.value.email,
        image :cardData, 
    }

Я пытаюсь отправить все 3 информации о полях за один вызов API.

мой сервис

    saveStoreCard(data) {
    let headers = new Headers();
        headers.append("Authorization", "Bearer " + sessionStorage.token);
        headers.set("content-type", "application/json");
        headers.append("accept", "application/json");
        let options = new RequestOptions({
            headers: headers
        });

        return this.http
            .post(`${this.SERVER_HOST}saveStoreCard`, data, options)
            .pipe(
                tap(
                    response => {   return response; },
                    error => {  this.loggedOutSet(error); }
                )
            );
    }

когда я посылаю изображение, его перенастройка Null на стороне сервера.

Answer 1

Ваш код имеет проблему здесь

const cardData = new FormData();
cardData.append('frontImage', this.frontImageFile, this.frontImageFile.name);
const data = {
  first_name: this.newCardForm.value.first_name,
  email: this.newCardForm.value.email,
  image : cardData, 
}

Если вы отправляете FormData, вы должны отформатировать все данные, используя FormData, поэтому вы должны изменить свой код следующим образом

const cardData = new FormData();
cardData.append('frontImage', this.frontImageFile, this.frontImageFile.name);
cardData.append('first_name', this.newCardForm.value.first_name);
cardData.append('email', this.newCardForm.value.email);

Дайте мне знать, если у вас все еще есть проблемы