fix bug 4

src/pages/menuPages/banners/components/BannerImageUpload.vue

@@ -9,6 +9,7 @@
       :action="uploadURL"
       :headers="fileHeader"
       :before-upload="beforeUpload"
+      :custom-request="customRequest"
       @change="onChange"
     >
       <div class="banner-image-upload__empty">
@@ -34,6 +35,7 @@
           :action="uploadURL"
           :headers="fileHeader"
           :before-upload="beforeUpload"
+          :custom-request="customRequest"
           @change="onChange"
         >
           <button type="button" class="banner-image-upload__btn banner-image-upload__btn--primary">
@@ -58,7 +60,10 @@ import { message } from 'ant-design-vue'
 import { uploadURL } from '@root/config'
 import { getToken } from '@/utils'
 import { normalizeUploadFileResponse } from '@/utils/file'
-import { createWebpBeforeUpload } from '@/utils/prepareImageForUpload'
+import {
+  createImageBeforeUpload,
+  createImageCustomRequest
+} from '@/utils/prepareImageForUpload'
 import type { UploadProps } from 'ant-design-vue'
 
 defineProps<{
@@ -76,31 +81,35 @@ const fileHeader = computed(() => ({
   Authorization: `Bearer ${getToken()}`,
 }))
 
-const beforeUpload: UploadProps['beforeUpload'] = createWebpBeforeUpload((msg) =>
+const beforeUpload: UploadProps['beforeUpload'] = createImageBeforeUpload((msg) =>
   message.error(msg)
 )
 
-function onChange({ file }: { file: { status?: string; response?: unknown } }) {
-  if (file.status === 'uploading') {
+const customRequest: UploadProps['customRequest'] = createImageCustomRequest({
+  action: () => uploadURL,
+  getHeaders: () => fileHeader.value,
+  messageError: (msg) => message.error(msg),
+  onStarted: () => {
     loading.value = true
-    return
-  }
-
-  if (file.status === 'error') {
+  },
+  onUploaded: (body) => {
     loading.value = false
-    message.error('خطا در آپلود تصویر')
-    return
-  }
-
-  if (file.status === 'done') {
-    loading.value = false
-    const fileResource = normalizeUploadFileResponse(file.response)
+    const fileResource = normalizeUploadFileResponse(body)
     if (!fileResource?.full_src) {
       message.error('خطا در ساخت آدرس تصویر')
       return
     }
     emit('upload', fileResource.full_src)
     message.success('تصویر با موفقیت آپلود شد')
+  },
+  onFailed: () => {
+    loading.value = false
+  }
+})
+
+function onChange({ file }: { file: { status?: string } }) {
+  if (file.status === 'uploading') {
+    loading.value = true
   }
 }
 </script>