django rest 框架甚至没有显示上传图片的选项。我在模型中有图像字段

Question

django rest framework dosent 甚至显示上传图片的选项。我确实在模型中有 imageField。当我转到 api url 以创建新项目时，我也会在控制台中获得 GET http://127.0.0.1:8000/api/person-create/ 405 (Method Not Allowed)。 TLDR 我正在尝试使用 django rest 框架上传图像，我可以从管理员那里完成，但不能使用 DRF 或前端任何帮助，谢谢。

view.py

@api_view(['POST'])
def create_person(request):
    serializer = PersonSerializer(data=request.data)
    if serializer.is_valid(raise_exception=True):
        serializer.save()
    return Response(serializer.data)

serializer.py

class PersonSerializer(serializers.ModelSerializer):
    image = serializers.ImageField(max_length=None, allow_empty_file=False, allow_null=True, required=True)

    class Meta():
        model = Person
        fields = 'name', 'about', 'created_at', 'email', 'image'
        

urls.py

urlpatterns = [
    path('', views.apiOverview, name='apiOverview'),
    path('persons/', views.all_persons, name='all_persons'),
    path('person/<str:pk>', views.person, name='person'),
    path('person-create/', views.create_person, name='create'),
    path('person-update/<str:pk>', views.update_person, name='update_person'),
    path('person-delete/<str:pk>', views.delete_person, name='delete_person'),
]

models.py

class Person(models.Model):
    name = models.CharField(max_length=50)
    about = models.CharField(max_length=10000)
    created_at = models.DateTimeField(auto_now_add=True)
    email = models.EmailField(unique=True)
    image = models.ImageField(blank=True, null=True, upload_to='media/', default='default.png')

这是前端部分 创建.js

const Create = () => {

    let history = useHistory();

    let [person, setPerson] = useState({
        name:"",
        about:"",
        email:"",
        image:"",
    })

    let createPerson = async (e) => {
        e.preventDefault()
        fetch(`/api/person-create/`, {
            method: "POST",
            headers: {
                "content-type": 'application/json'
            },
            body: JSON.stringify(person)
        })
        .then(setPerson({
            name:"",
            about:"",
            email:"",
            image:"",
        }))
    }

    let handleChange = (e) => {
        setPerson({...person, [e.target.id]: e.target.value});
        console.log(person)
    }

    useEffect(() => {
        console.log("correct", person);
      }, [person]);
    
    return (
        <div class="container">
        <div class="row justify-content-center">
            
            <form onSubmit={(e) => createPerson(e)}>
                <div>
                    <h2>
                        <button onClick={() => history.push('/')} className="btn btn-primary mt-4">
                            &#10094; Back
                        </button>
                    </h2>


                    <h2 className="mt-4 mb-4" style={{width: '600px'}}>
                        New Person
                    </h2>

                    <div className="form-group" style={{width: '600px'}}>
                        <label>Name</label>
                        <input onChange={handleChange} className="form-control" id="name" placeholder="Enter Name" value={person.name} />
                    </div>

                    <div className="form-group" style={{width: '600px'}}>
                        <label for="exampleInputEmail1">About</label>
                        <textarea style={{height: '250px'}}  onChange={handleChange} className="form-control" id="about" placeholder="Tell us somthing about yourself" value={person.about} />
                    </div>

                    <div className="form-group" style={{width: '600px'}}>
                        <label>Email</label>
                        <input onChange={handleChange} className="form-control" id="email" placeholder="Enter Email" value={person.email} />
                    </div>

                    <div className="custom-file mt-3">
                        <input onChange={handleChange} type="file" className="custom-file-input" id="image" value={person.image} />
                        <label className="custom-file-label" for="customFile">Choose file</label>
                    </div>
                    
                    <button type="submit" className="btn btn-primary mt-4">Submit</button>

                </div>
            </form>
        </div>
        </div>

        )
}

export default Create

Answer 1

您已将允许的方法限制为仅在您的视图中发布，那么在执行 GET 时预计会出现 405 错误。你可以添加GET方法

@api_view(['POST', 'GET'])

请记住，您将需要处理 GET 的情况并返回一些内容。您可以在此处查看 drf docs 的示例： https://www.django-rest-framework.org/api-guide/views/#api_view

此外，作为 REST API 中的一种良好做法，您应该避免使用 -create、-update、-delete 之类的操作来命名端点。标准是每个资源都有一个 url，例如 persons/，然后声明 POST 将用于创建，GET 将用于检索（一个人 ro 一个列表），PUT/PATCH 将用于更新。

您可以使用 DRF routers 和 viewsets，或者更具体地为您的情况使用 ModelViewSet，轻松完成所有这些工作。在此处查看有关 drf 文档的更多信息：

https://www.django-rest-framework.org/api-guide/viewsets/#modelviewset

https://www.django-rest-framework.org/api-guide/routers/#routers