update upload image

src/assets/type.ts

@@ -111,9 +111,9 @@ export type WorkType = {
 
 export type BannerType = {
   bannerUrl: string;
-  id: number;
-  numIndex: number;
-  status: number;
+  id?: number;
+  numIndex?: number;
+  status?: number;
   url?: string;
   file?: File;
 };
@@ -134,6 +134,8 @@ export type StoriesType = {
   content: string;
   imageUrl: string;
   status: number;
+  url?: string;
+  file?: File;
 };
 
 export type BankAccountType = {

src/css/app.scss

@@ -7,7 +7,7 @@
       .q-table__bottom,
       thead tr:first-child th {
         // / bg color is important for th; just specify one /
-        background-color: #c1f4cd;
+        background-color: white;
       }
   
     thead tr th {

src/pages/cap-nhat-thong-tin-nghe-sy/updateInformationArtist.ts

@@ -88,6 +88,7 @@ export default defineComponent({
     const account: Ref<string | null> = ref(null);
     const avatar: Ref<string | null> = ref(null);
     const avatarFile: Ref<File | null> = ref(null);
+    const avatarUploaded: Ref<string | null> = ref(null);
     const artistCode: Ref<string> = ref('');
     const fullName: Ref<string> = ref('');
     const artistName: Ref<string | null | undefined> = ref();
@@ -309,6 +310,8 @@ export default defineComponent({
     };
 
     const selectedFile = (value: BannerType) => {
+      console.log(value, 'banners');
+
       banners.value.push(value);
       console.log(banners.value);
     };
@@ -374,6 +377,7 @@ export default defineComponent({
 
     const addStory = (value: StoriesType) => {
       stories.value.push(value);
+      console.log(stories, 'storiesstoriesstories');
     };
 
     const deleteStory = (idx: number) => {
@@ -404,29 +408,84 @@ export default defineComponent({
 
       birthday.value = value;
     };
-    // const callApiUploadImage = async (file: File) => {
-    //   try {
-    //     const bodyFormData = new FormData();
-    //     bodyFormData.append('file', file);
-    //     const response = (await api({
-    //       headers: { 'Content-Type': 'multipart/form-data' },
-    //       url: 'http://cms.vab.xteldev.com/file/upload',
-    //       method: 'POST',
-    //       data: bodyFormData,
-    //     })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
-    //     if (response.data.error.code === config.API_RES_CODE.OK.code) {
-    //     }
-    //   } catch (error) {}
-    // };
+    const callApiUploadAvatar = async (file: File) => {
+      try {
+        const bodyFormData = new FormData();
+        bodyFormData.append('file', file);
+        const response = (await api({
+          headers: { 'Content-Type': 'multipart/form-data' },
+          url: 'http://cms.vab.xteldev.com/file/upload',
+          method: 'POST',
+          data: bodyFormData,
+        })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          avatarUploaded.value =
+            'http://cms.vab.xteldev.com/file/upload/' +
+            response.data.data.fileName;
+        }
+      } catch (error) {}
+    };
+    const callApiUploadBanners = async (file: File, index: number) => {
+      try {
+        const bodyFormData = new FormData();
+        bodyFormData.append('file', file);
+        const response = (await api({
+          headers: { 'Content-Type': 'multipart/form-data' },
+          url: 'http://cms.vab.xteldev.com/file/upload',
+          method: 'POST',
+          data: bodyFormData,
+        })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          const bannerUpload =
+            'http://cms.vab.xteldev.com/file/upload/' +
+            response.data.data.fileName;
+          banners.value[index] = {
+            bannerUrl: bannerUpload,
+          };
+        }
+      } catch (error) {}
+    };
+    const callApiUploadStories = async (file: File, idxStory: number) => {
+      try {
+        const bodyFormData = new FormData();
+        bodyFormData.append('file', file);
+        const response = (await api({
+          headers: { 'Content-Type': 'multipart/form-data' },
+          url: 'http://cms.vab.xteldev.com/file/upload',
+          method: 'POST',
+          data: bodyFormData,
+        })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          const urlStoryUpload =
+            'http://cms.vab.xteldev.com/file/upload/' +
+            response.data.data.fileName;
+          stories.value[idxStory].imageUrl = urlStoryUpload;
+        }
+      } catch (error) {}
+    };
     const updateInformationArtist = async () => {
       try {
-        // await callApiUploadImage(avatarFile.value as File);
+        if (avatarFile.value !== null) {
+          await callApiUploadAvatar(avatarFile.value);
+        }
+        for (let index = 0; index < banners.value.length; index++) {
+          const element = banners.value[index];
+          if (element.file !== undefined) {
+            await callApiUploadBanners(element.file, index);
+          }
+        }
+        for (let idx = 0; idx < stories.value.length; idx++) {
+          const item = stories.value[idx];
+          if (item.file !== undefined) {
+            await callApiUploadStories(item.file, idx);
+          }
+        }
         const response = (await api({
           url: API_PATHS.updateArtist,
           method: 'POST',
           data: {
             id: route.params.id,
-            avatar: avatar.value,
+            avatar: avatarUploaded.value,
             artistCode: artistCode.value,
             artistName: artistName.value,
             // eslint-disable-next-line @typescript-eslint/restrict-plus-operands

src/pages/nghe-sy/index.vue

@@ -20,6 +20,7 @@
         outlined
       ></q-select>
     </div>
+
     <div class="col-2" dense outlined>
       <q-select
         v-model="professionSelected"

src/pages/them-nghe-sy/AddArtist.ts

@@ -34,6 +34,7 @@ import {
   SchedulesType,
   CardBankType,
   TypeCardType,
+  FileUploadType,
 } from 'src/assets/type';
 
 export type AvatarType = {
@@ -87,6 +88,7 @@ export default defineComponent({
     const account: Ref<string | null> = ref(null);
     const avatar: Ref<string | null> = ref(null);
     const avatarFile: Ref<File | null> = ref(null);
+    const avatarUploaded: Ref<string | null> = ref(null);
     const artistCode: Ref<string> = ref('');
     const fullName: Ref<string> = ref('');
     const artistName: Ref<string | null | undefined> = ref();
@@ -352,24 +354,86 @@ export default defineComponent({
         stories.value.splice(idx, 1);
       });
     };
-    // const callApiUploadImage = async (file: File) => {
-    //   try {
-    //     const response = await api({
-    //       url: API_PATHS.uploadImage,
-    //       method: 'GET',
-    //       params: {},
-    //     });
-    //   } catch (error) {}
-    // };
+
+    const callApiUploadAvatar = async (file: File) => {
+      try {
+        const bodyFormData = new FormData();
+        bodyFormData.append('file', file);
+        const response = (await api({
+          headers: { 'Content-Type': 'multipart/form-data' },
+          url: 'http://cms.vab.xteldev.com/file/upload',
+          method: 'POST',
+          data: bodyFormData,
+        })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          avatarUploaded.value =
+            'http://cms.vab.xteldev.com/file/upload/' +
+            response.data.data.fileName;
+        }
+      } catch (error) {}
+    };
+    const callApiUploadBanners = async (file: File, index: number) => {
+      try {
+        const bodyFormData = new FormData();
+        bodyFormData.append('file', file);
+        const response = (await api({
+          headers: { 'Content-Type': 'multipart/form-data' },
+          url: 'http://cms.vab.xteldev.com/file/upload',
+          method: 'POST',
+          data: bodyFormData,
+        })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          const bannerUpload =
+            'http://cms.vab.xteldev.com/file/upload/' +
+            response.data.data.fileName;
+          banners.value[index] = {
+            bannerUrl: bannerUpload,
+          };
+        }
+      } catch (error) {}
+    };
+    const callApiUploadStories = async (file: File, idxStory: number) => {
+      try {
+        const bodyFormData = new FormData();
+        bodyFormData.append('file', file);
+        const response = (await api({
+          headers: { 'Content-Type': 'multipart/form-data' },
+          url: 'http://cms.vab.xteldev.com/file/upload',
+          method: 'POST',
+          data: bodyFormData,
+        })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          const urlStoryUpload =
+            'http://cms.vab.xteldev.com/file/upload/' +
+            response.data.data.fileName;
+          stories.value[idxStory].imageUrl = urlStoryUpload;
+        }
+      } catch (error) {}
+    };
 
     const addArtist = async () => {
       try {
+        if (avatarFile.value !== null) {
+          await callApiUploadAvatar(avatarFile.value);
+        }
+        for (let index = 0; index < banners.value.length; index++) {
+          const element = banners.value[index];
+          if (element.file !== undefined) {
+            await callApiUploadBanners(element.file, index);
+          }
+        }
+        for (let idx = 0; idx < stories.value.length; idx++) {
+          const item = stories.value[idx];
+          if (item.file !== undefined) {
+            await callApiUploadStories(item.file, idx);
+          }
+        }
         const response = (await api({
           url: API_PATHS.addArtist,
           method: 'POST',
           data: {
             id: route.params.id,
-            avatar: avatar.value,
+            avatar: avatarUploaded.value,
             artistCode: artistCode.value,
             artistName: artistName.value,
             // eslint-disable-next-line @typescript-eslint/restrict-plus-operands