Formdata generuje niepoprawny JSON

Question

Witam,

w react mam state:

ingredients: [
                {
                    name: '1',
                    value: '1',
                    unit: '1'',
                },
            ],

razem z tym state chce wysłać zdjęcia, używam do tego FormData, zdjęcia przechodzą ale wartość ze state już nie, mam zrobione tak:

let formData = new FormData();
        let values = this.state.values;

       for (let key = 0; key < Object.keys(values.photos).length; key++) {
          formData.append("images[]", values.photos[key]);
       }

        for (let key = 0; key < Object.keys(values.ingredients).length; key++) {
            formData.append("ingredients[]", values.ingredients[key]);
        }

        await recipeApi.createRecipe(formData)
            .then(response => {
                this.setState({snackbar: {
                        open: true,
                        message: response.data.success,
                        variant: 'success',
                    }
                });
                this.setState({activeStep: 0});

                this.props.history.push(`/recipe/${response.data.slug}`);
            })
            .catch(error => {
                this.setState({snackbar: {
                        open: true,
                        message: error.response.data.error,
                        variant: 'error',
                    }
                });

                console.log(error.response.data);
            })

gdy wyśle tak to wyskakuje że wartość w ingredients jest błędna, próbowałem zrobić też tak ale ciągle tak samo:

        for (let key = 0; key < Object.keys(values.ingredients).length; key++) {
            formData.append("ingredients[]", JSON.stringify(values.ingredients[key]));
        }

gdy patrze co wraca z backendu to bez JSON.stringify wyrzuca 

ingredients: Array(1)
0: "[object Object]"

a z JSON.stringify:

ingredients: Array(1)
0: "{"name":"1","value":"1","unit":"kg"}"

próbowałem też zrobić recipeApi.createRecipe(JSON.stringify(formData)) ale wtedy nie przechodzą obrazki :/

 

PS: ogólnie inne wartości przechodzą dalej tylko mam problem z tablicą ingredients, wartości przechodzą bez użycia JSON.stringify 

Comments

Czy możesz pokazać strukturę danych dla obrazków, czyli values.photos?

---

FileList {0: File, length: 1}
0: File {name: "cat.jpg", lastModified: 1553511094320, lastModifiedDate: Mon Mar 25 2019 11:51:34 GMT+0100 (czas środkowoeuropejski standardowy), webkitRelativePath: "", size: 435693, …}
length: 1

state:

photos: {}

 

---

@JSHolic, PS: jednak jak dam JSON.stringify(formData) to w ogóle nic nie przechodzi :/

---

Obstawiam, że problem jest w błędnej formie dodawania danych do formData, Dane powinny być enkodowane jako "multipart/form-data", czyli - klucz/wartość (tak jak ma to miejsce przy przesyłaniu zwykłego formularza). Ty natomiast wrzucasz tam obiekty. Spróbuj sklejać je w taki sposób:

// PSEUDOKOD

for (..) {
	formData.append('ingredients.name', '1');
	.. // następna iteracja
	formData.append('ingredients.value', '1');
}

Czyli zagnieżdżenia zapisuj jako

formData.append( "ingredients[ ewentualny_indeks_obiektu_w_tablicy ].nazwa_klucza_obiektu", "wartość" );

. Możesz sobie to zautomatyzować (jakaś funkcja rekurencyjna do sklejania tego). Ewentualnie zrezygnuj z FormData i prześlij jako JSON.

---

problem w tym że przez json nie przesyła mi obrazku tylko null :/

---

To prześlij w formacie binarnym lub jako Base64.