comment faire un systeme de file upload avec nuxt et laravel

j'ai un probleme avec laravel et nuxt, je veux faire une ajout en base donnees, mais le probleme j'arrive pas a upoder les image

/** ce code me permet de mieux utiliser $fetch */
export const useApi$Fetch = <T>(path: string, options: any = {}) => {
  const config = useRuntimeConfig()
  const token = useCookie('XSRF-TOKEN')

  let headers: Record<string, string> = {
    accept: 'application/json',
    'Content-Type': 'application/json',
    referer: useRequestURL().origin,
  }

  if (token.value) {
    headers['X-XSRF-TOKEN'] = token.value as string
  }

  if (process.server) {
    headers = {
      ...headers,
      ...useRequestHeaders(['cookie']),
    }
  }

  return $fetch<T>(path, {
    baseURL: config.public.BACKEND_URL,
    credentials: 'include',
    ...options,
    headers: {
      ...headers,
      ...options.headers,
    },
  })
}

/** ce code me permet d'effectuer un ajout en base de donnees */
<script setup lang="ts">
import { useToast } from 'primevue/usetoast';

definePageMeta({
    middleware: ['auth', 'subscribe'],
    layout: 'client-layout',
});

interface ONG{
    name:string,
    sigle: string,
    logo: File|null,
    mission: string,
    objectif: string,
    description: string,
    email: string,
    emplacement: string,
    numero: string

}

const { csrf } = useAuthStore();
const form = ref<ONG>({
    name: '',
    sigle: '',
    logo: null,
    mission: '',
    objectif: '',
    description: '',
    email: '',
    emplacement: '',
    numero: ''
});
const toast = useToast();
const errors = ref<{ [key in keyof ONG]?: string[] }>({});
const isLoading = ref<boolean>(false);

/**
 * Gestion de l'upload du fichier logo
 */ 
 const handleFileInput = (event: Event) => {
    const target = event.target as HTMLInputElement;
    if (target.files && target.files[0]) {
        form.value.logo = target.files[0];
    }
};
const onAdvancedUpload = () => {
    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
};
/**
 * Soumission du formulaire
 */
 const handleSubmit = async () => {
    await csrf()
    isLoading.value = true;

    try {
        const response = await useApi$Fetch('/api/createOng', {
            method: 'POST',
            body: form.value,

        });

        toast.add({ severity: 'success', summary: 'Succès', detail: 'ONG créée avec succès!', life: 3000 });
        console.log(response);
        // Redirection ou réinitialisation du formulaire ici si nécessaire

    } catch (err: any) {
        isLoading.value = false;

        if (err.data) {
            errors.value = err.data.errors || {};
        }

        toast.add({ severity: 'error', summary: 'Erreur', detail: 'Erreur lors de la création de l\'ONG.', life: 3000 });
        console.error(err.data);
    }
};

    // Rediriger ou réinitialiser le formulaire si nécessaire

</script>

Ce que je veux

cest pouvoir uploder les image puis enregister le chemin en base de donnees, quand jenleve l'image tous marche super bien, mais le probleme ces luload

Ce que j'obtiens

jai une erreur 422, me disan que logo: doit etre une image,
du cote front jai bien limage uploder:
{name: "DSHDJDJ", sigle: "jjjdj",…}
description
:
"NNDNDN"
email
:
"jj@gmail.com"
emplacement
:
"DJDJDJJDJ"
logo
:
{objectURL: "blob:http://localhost:3000/00823b5d-00c8-4339-b56d-88da44624760"}
mission
:
"CNDBDNDN"
name
:
"DSHDJDJ"
numero
:
"7474747474"
objectif
:
"NNDNDN"
sigle
:
"jjjd
voici ce que je recois, mais avec ca jai une erreur au niveau e limage