Почему я получаю 400 неверных статусов запросов при попытке загрузить изображение, чтобы отреагировать на публикацию в DRF createAPIView?

Question

Я пытаюсь опубликовать изображения в моем drf API, используя реакционную зону сброса. Однако, когда я пытаюсь отправить запрос, я получаю сообщение об ошибке 400 неверных запросов. Это связано с моей конечной точкой в ​​ax ios, когда я вызываю handleSubmit ().

Когда я смотрю на сетевые инструменты в консоли браузера, заголовки показывают, что FormData проходит через phlogImage, помеченный как двоичный ,

Сетевые инструменты также показывают, что файл не передается при предварительном просмотре и ответе конечной точке:

React Devtools действительно демонстрируют, что компонент успешно получает изображение, но не отправляет его в api.

handleSubmit(event) {
        console.log(this.state);
        axios({
            headers: {'content-type':'multipart/form-data'},
            method: this.state.apiAction,
            url: this.state.apiUrl,
            data: this.buildForm(),
            withCredentials: true
        })
        .then(response => {

            if (this.state.editMode) {
                this.props.handlePhlogSubmission();
            } else {
                this.props.handleNewPhlogSubmission(response.data);
                // debugger;
            }

Я не понимаю, как handleNEwPhlogSubmission () не определен, как показано в инструментах реагирования, начиная с response.data в консоли, входящей в консоль.

            this.setState({
                phlog_status: '',
                phlog_image_url: '',
                position: '',
                editMode: false,
                apiUrl:'http://127.0.0.1:8000/phlogapi/phlog/', 
                apiAction: 'post'
            });

            [this.phlogImageRef].forEach(ref => {
                ref.current.dropzone.removeAllFiles();
            });
        })

Эта ошибка вызывается здесь и отображает в консоли следующее: POST http://127.0.0.1: 8000 / phlogapi / phlog / create / 400 (неверный запрос)

        .catch(error => {
            console.log('handleSubmit phlogEditor error', error);
        });

       event.preventDefault();
    }

views.py: Здесь я создаю свой createAPIView для создания конечной точки в URLS.py

from phlogfeeder.models import PhlogFeeder
from .serializers import PhlogFeederSerializers
from rest_framework import permissions, status
from rest_framework.parsers import FormParser, MultiPartParser
from rest_framework.generics import (
    ListAPIView,
    RetrieveAPIView,
    CreateAPIView,
    DestroyAPIView,
    UpdateAPIView
)

class PhlogListView(ListAPIView):
    queryset = PhlogFeeder.objects.all()
    serializer_class = PhlogFeederSerializers
    permission_classes = (permissions.AllowAny, )
    parser_classes = (MultiPartParser,FormParser,)

    def upload(self, serializer, format=None):
        owner = self.request.user
        if self.request.data.get('phlog_image_url') is not None:
            image_upload = self.request.data.get('phlog_image_url')
            serializer.save(owner=owner, phlog_image_url=phlog_image_url)
        else:
            serializer.save(owner=owner)

class PhlogDetailView(RetrieveAPIView):
    queryset = PhlogFeeder.objects.all()
    serializer_class = PhlogFeederSerializers
    permission_classes = (permissions.AllowAny, )

class PhlogCreateView(CreateAPIView):
    queryset = PhlogFeeder.objects.all()
    serializer_class = PhlogFeederSerializers
    permission_classes = (permissions.AllowAny, )

class PhlogUpdateView(UpdateAPIView):
    queryset = PhlogFeeder.objects.all()
    serializer_class = PhlogFeederSerializers
    permission_classes = (permissions.AllowAny, )

class PhlogDeleteView(DestroyAPIView):
    queryset = PhlogFeeder.objects.all()
    serializer_class = PhlogFeederSerializers
    permission_classes = (permissions.AllowAny, )