Upload image file using django rest framework in a single page application

I am trying to upload image using Vuejs and Django, but I can't figure out how to solve it.

This is the django side:

class UserDetail(models.Model):
    user = models.OneToOneField(User)
    profile_picture = models.ImageField(upload_to=create_file_path)

class UserDetailSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserDetail
        fields = '__all__'

class UserDetailViewSet(viewsets.ModelViewSet):
    queryset = UserDetail.objects.all()
    serializer_class = UserDetailSerializer
    permission_classes = [AllowAny]

    @detail_route(permission_classes=[AllowAny], methods=['POST'], parser_classes=[FormParser, MultiPartParser])
    def create_or_update_profile_picture(self, request):
        user = request.user
        #
        # how to create or update user detail profile picture ?
        #

I am posting the data this way from Vuejs:

changeProfilePicture() {
    const file_input = document.getElementById('display_profile_image');
    const img = file_input.files[0];
    let formData = new FormData();
    formData.append("profile_picture", img);
    const url = this.$store.state.website + '/api/accounts/user-detail/none/create_or_update_profile_picture/';
    this.$http.post(url, formData)
        .then(function (response) {
            this.$store.dispatch('getUserDetail');
        })
        .catch(function (response) {
            console.log(response);
        });
}

How can I use the post data to create or update the request.user's profile_picture with Django and django rest framework inside the model viewset class, using default methods (create/update/partial_update) or by creating a new detail route?