update

pages/account/profile.vue

@@ -1,11 +1,17 @@
 <template>
   <div class="flex justify-between flex-col text-[#383E43]">
-   
     <div class="relative">
       <img
+      v-if="authUser.avatarMedia"
         :src="authUser?.avatarMedia"
         class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
-        alt=""
+        alt="profile"
+      />
+      <img
+      v-else
+        src="/public/images/alt.png"
+        class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
+        alt="profile"
       />
       <label for="file-upload" class="custom-file-upload">
         <svg
@@ -73,10 +79,8 @@
           />
         </svg>
       </label>
-      <input type="file" id="file-upload" @change="changePhoto" />
+      <input type="file" id="file-upload" @change="changePhoto"/>
     </div>
-
-
     <FormKit
       type="form"
       @submit="edit"
@@ -151,6 +155,7 @@ import { useToast } from "vue-toastification";
 const toast = useToast();
 const { authUser } = useAuth();
 const loading = ref(false);
+const name = ref("avater");
 const edit = async (formData) => {
   try {
     loading.value = true;
@@ -165,19 +170,28 @@ const edit = async (formData) => {
     loading.value = false;
   }
 };
-const changePhoto = async (val) => {
-  const fd = new FormData('hi')
-  fd.append('name', 'hi')
-  console.log('fd', fd);
+async function changePhoto(val) {
+  console.log("image", val.target.files[0]);
+  const formData = new FormData();
+  formData.append('file', val.target.files[0]);
+  formData.append('directoryName', name.value);
+  console.log('keys', formData.values());
+  try {
+    await $fetch("/api/uploader", {
+      method: "POST",
+      body: formData,
+    });
+  } catch (error) {
+    console.log('error client', error);
+  }
+  //        console.log('ss', formData);
+
   // const data = await useFetch("/api/uploader", {
   //   method: "POST",
-  //   body: {
-  //     file: val.target.value,
-  //     directoryName: "profileAvatar",
-  //   },
+  //   body: formData
   // });
-  // console.log("done", data);
-};
+  //  console.log("done", data.data);
+}
 </script>
 
 <style scoped>