How to send a post request from Reactjs frontend to django rest framework API, with nested object and file

Question

我嘗試使用 object 和文件提交數據。 我測試了我的 API，我的 api 工作正常。 但是當我從前端發送數據時，我看到了錯誤。 錯誤是 400 錯誤請求。 人是不存在的。

這是我的 api 的格式。

# this is my model

class People(models.Model):
    name = models.CharField(max_length=255)
    image = models.FileField(upload_to='people/', null=True, blank=True)

    def __str__(self):
        return self.name


class Category(models.Model):
    people = models.ForeignKey(People, on_delete=models.CASCADE)
    category_name = models.CharField(max_length=255)
    category_image = models.FileField(upload_to='category_image', null=True, blank=True)

    def __str__(self):
        return self.category_name

# this is my serializer
class PeopleSerializer(serializers.ModelSerializer):

    class Meta:
        model = models.People
        fields = ('id', 'name', 'image')


class CategorySerializer(serializers.ModelSerializer):
    people = PeopleSerializer()

    class Meta:
        model = models.Category
        fields = ('id', 'people', 'category_name', 'category_image')

    def create(self, validated_data):
        people_data = validated_data.pop('people')
        people = models.People.objects.create(**people_data)
        category = models.Category.objects.create(people=people, **validated_data)
        return category

# This is the view
class PeopleViewSet(viewsets.ModelViewSet):
    serializer_class = serializers.PeopleSerializer
    queryset = models.People.objects.all()


class CategoryViewSet(viewsets.ModelViewSet):
    serializer_class = serializers.CategorySerializer
    queryset = models.Category.objects.all()

import React, {Component} from 'react';
import axios from "axios";

class AddPeople extends Component {
    state = {
        name: '',
        image: null,
        category_name: '',
        category_image: null,
    };

    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    };

    handleImageChange = (e) => {
        this.setState({
            image: e.target.files[0],
            category_image: e.target.files[0]
        })
    };

    handleSubmit = (e) => {
        e.preventDefault();
        console.log('this state', this.state);
        let form_data = new FormData();

        // form_data.append('image', this.state.image, this.state.image.name);
        form_data.append('category_image', this.state.category_image, this.state.category_image.name);
        form_data.append('category_name', this.state.category_name);

        form_data.append('people', JSON.stringify(people));

        let url = 'http://127.0.0.1:8000/api/v1/category/';


        // console.log(token);
        axios.post(url, form_data, {
            headers: {
                Accept: 'application/json',
                'content-type': 'multipart/form-data',
            }
        })
            .then(res => {
                console.log('success', res.data);
            })
            .catch(err => console.log(err))
    };

    render() {
        return (
            <div className="App">
                <form onSubmit={this.handleSubmit}>
                    <p>
                        <input type="text" placeholder='Name' id='name' value={this.state.name}
                               onChange={this.handleChange} required/>
                    </p>

                    <p>
                        <input type="text" placeholder='Category name' id='category_name'
                               value={this.state.category_name}
                               onChange={this.handleChange} required/>
                    </p>

                    <p>
                        <input type="file"
                               id="image"
                               accept="image/png, image/jpeg" onChange={this.handleImageChange}/>
                    </p>

                    <p>
                        <input type="file"
                               id="category_image"
                               accept="image/png, image/jpeg" onChange={this.handleImageChange}/>
                    </p>
                    <input type="submit"/>
                </form>
            </div>
        );
    }
}

export default AddPeople;

Answer 1

問題出在這一行：-

form_data.append("people", JSON.stringify(people));

我添加了您的反應代碼的 output 的屏幕截圖。 'people' is not defined是錯誤的。 它是未定義的。