Ни один файл не был отправлен. Django Rest Framework React js

У меня есть модель в django, где есть поле imageField, и она работает, когда я тестировал ее на Postman, но когда я пытаюсь интегрировать ее в React, сообщение о том, что файл не представлен.

Вот мой код:

models.py

class File(models.Model):
    ...

def upload_to(instance, filename):
    return "posts/{filename}".format(filename=filename)


class UploadedFile(File):
    file = models.ImageField(_("Image"), upload_to=upload_to)

views.py

class FileUploadedCreate(APIView):

    permission_classes = [permissions.IsAuthenticated]
    parser_classes = [MultiPartParser, FormParser]

    def post(self, request, format=None):
        print(request.data)
        serializer = FileUploadSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return response.Response(serializer.data, status=status.HTTP_200_OK)
        else:
            return response.Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

serializers.py

class FileUploadSerializer(serializers.ModelSerializer):
    class Meta:
        model = UploadedFile
        fields = "__all__"

реактивный код

...
const [uploadFile, setUploadFile] = useState(null);
    const onChange = (e) => {
        if ([e.target.name] == 'image') {
            setUploadFile({ file: e.target.files[0] });
        }
        console.log(e.target.files);
    };

    useEffect(() => {}, [uploadFile]);

    const handleUpload = () => {
        if (uploadFile) {
            if (selectedFolder !== 0) {
                let formData = new FormData();
                formData.append('image', uploadFile);
                let url = 'http://localhost:8000/classroom/resources-file/upload';
                axios
                    .post(url, formData, {
                        headers: {
                            'content-type': 'multipart/form-data',
                        },
                    })
                    .then((res) => {
                        console.log(res.data);
                    })
                    .catch((err) => console.log(err));

                console.log(uploadFile.file, uploadFile.file.name, selectedFolder);
            } else {
                alert('Please select folder for your file');
            }
        }
    };
....
return (
<input
        accept='image/*'
        name='image'
        onChange={onChange}
        id='upload-file-button'
        type='file'
    />
<button onClick={handleUpload}> Submit </button>

Пожалуйста, помогите мне Я видел похожие вопросы здесь, но ни одно из решений не работает для моего кода. Также, я следую этому [демо/учебнику] https://www.youtube.com/watch?v=V2zaeqFSSTE, но все равно не работает

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