Как добавить список и текст в React Js в виде FormData

здесь я хочу передать список в FormData с текстовыми элементами тоже.

Ниже я привел весь код backend и frontend с принятыми данными.

Я сталкиваюсь с ошибкой product_image":["Это поле обязательно."] Хотя я передал product_image в FormData Но дело в том, что я добавил как список в formdata, но он является строкой при добавлении, так что пожалуйста, помогите мне.

Эти данные принимаются только Django, так как требуется FormData.

{
    "Name": "1",
    "category": "1",
    "Description": "1",
    "archive": "true",
    "Main_Image": {},
    "Banner": {},
    "product_image": [
        {
            "Name": "img[0]",
            "image": {},
            "secret_key": "Keys"
        },
        {
            "Name": "img[1]",
            "image": {},
            "secret_key": "Keys"
        }
    ],
}

Это код Frontend React Js

    const handleSubmit = async (event) => {
        event.preventDefault();

        const products = new FormData();

        Object.keys(p_details).forEach((key) => products.append(key, p_details[key]));

        // Iterate over the Image object and append each file
        var parentObj = [];

        for (var key in p_imgs.Image) {
            if (p_imgs.Image.hasOwnProperty(key)) {
                var file = p_imgs.Image[key];
                var nameWithKey = p_imgs.Name + "[" + key + "]";
                var obj = {
                    "Name": nameWithKey,
                    "user": 2,
                    "image": file,
                    "secret_key": "Keys"
                };
                parentObj.push(obj);
            }
        }
        products.append('product_image', JSON.stringify(parentObj));
       

  try {
            const response = await fetch('http://127.0.0.1:8000/media/product/create/', {
                method: 'POST',
                body: products
            });
            
            if (!response.ok) {
                const errorMessage = await response.text();
                throw new Error(`Server error: ${response.status} - ${errorMessage}`);
            }

            console.log('File uploaded successfully.', response);
        } catch (error) {
            console.error('Error uploading file:', error);
            console.error('Error uploading file:', error.response.data);
        }        
    };

Это код Django Serializers.py

class ProductSerializer(serializers.ModelSerializer):

    product_image = ProductImageSerializer(many = True)

    class Meta:
         model = ProductSize
         fields = "__all__"

Вернуться на верх