Загрузка изображения профиля из React в Django

Я пытаюсь загрузить изображение из моего front-end (React) в Django, но получаю ошибку, Bad request, возможно потому, что сериализатор не принимает данные изображения.

Вот как данные попадают в бэкенд <QueryDict: {'id': ['1'], 'image': ['[объект Object]']}>

Это мое мнение.

class ProfilePictureView(APIView):

    parser_classes = [MultiPartParser, FormParser]
    
    def post(self, request):
        print(request.data)
        ipdb.set_trace()
        serializer = ProfilePictureSerializers(data=request.data)
        if serializer.is_valid():
            try:
                picture = User.objects.get(id=request.data['id'])
                picture.image = request.data['image']
                picture.save()
                serializer = ProfilePictureSerializers(picture)
                return Response(serializer.data, status=status.HTTP_200_OK)
            except:
                return Response({"Detail": "Not found"}, status=status.HTTP_404_NOT_FOUND)
        else:
            return Response(status=status.HTTP_400_BAD_REQUEST)

Это моя модель.

def upload_to(instance, filename):
    return 'media/{filename}'.format(filename=filename)

class User(AbstractUser):
    image = models.ImageField(_("Image"),null=True, blank=True, upload_to=upload_to, default='media/default.png')

Сериализатор.

class ProfilePictureSerializers(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'image')

И моя заявка на фронтенде.

const config = {headers: {'content-type': 'multipart/form-data'}};

export const ProfilePictureThank = (UserData, setError) => (dispatch) => {
  let formData = new FormData();
  formData.append("id", UserData.id)
  formData.append("image", UserData.image)

  axios
    .post(
      `${url_local}/api/profile/picture/`, formData, config)
    .then((info) => {
      dispatch(postUserProfilePicture(info.data));
    })
    .catch((error) => {
      setError(true);
      dispatch(postUserProfilePicture(error));
    });
};

А вот приложение профиля.

   const UserData = {
        id: userId,
        image: photo
    }
    const changeImage = async (e) => {
        setPhoto({image: e.target.files})
        dispatch(await ProfilePictureThank( UserData, setError));
        
      };

    <section className="profile-picture-container">
           <div className="profile-picture-item">
           <img className="profile-photo" src={photo}  />;
           <label for="upload" className="change-photo-button" >
               Trocar Imagem
           <input name="image" encType="multipart/form-data" type="file" id="upload" onChange={changeImage} />
           </label>
           </div>
           <div className="profile-picture-item">
            Bem vindo, {name}
           </div>
       </section>

Если я удалю serializer.is_valid() из моего представления, я получу статус 200, но изображение не сохранится.

Я перепробовал множество решений, которые нашел здесь на stack overflow, но ни одно из них не работает в моем случае.

Если кто-то может помочь мне, я буду очень признателен.

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