fix bug 4

src/components/ProductUploader/ProductImageUploader.vue

@@ -13,6 +13,7 @@
             :headers="fileHeader"
             :showUploadList="true"
             :before-upload="beforeUpload"
+            :custom-request="customRequest"
             @change="handleChange"
         >
           <div>
@@ -32,16 +33,19 @@ import {uploadURL} from '@root/config'
 import {getToken} from '@/utils'
 import {fixFileCapture} from '@/utils/fixFileCapture'
 import {normalizeUploadFileResponse} from '@/utils/file'
-import {createWebpBeforeUpload} from '@/utils/prepareImageForUpload'
+import {
+  createImageBeforeUpload,
+  createImageCustomRequest
+} from '@/utils/prepareImageForUpload'
 import {usePrefix} from '@core/composable/usePrefix'
 import {computed, onMounted, ref} from 'vue'
 
 const {prefixCls} = usePrefix('product-image-uploader')
 const loading = ref<boolean>(false)
 
-const fileHeader = {
+const fileHeader = computed(() => ({
   Authorization: `Bearer ${getToken()}`
-}
+}))
 
 interface Props {
   fileList?: Array<FileList>
@@ -60,47 +64,66 @@ const fileList = computed({
   }
 })
 
-const beforeUpload: UploadProps['beforeUpload'] = createWebpBeforeUpload((msg) =>
+const beforeUpload: UploadProps['beforeUpload'] = createImageBeforeUpload((msg) =>
   message.error(msg)
 )
 
+function applyUploadedProductImage(body: unknown, meta: { uid?: string }) {
+  loading.value = false
+  const fileResource = normalizeUploadFileResponse(body)
+
+  if (!fileResource?.id || !fileResource.full_src) {
+    if (meta.uid) {
+      fileList.value = fileList.value.filter((item) => item.uid !== meta.uid)
+    }
+    message.error('خطا در ساخت آدرس تصویر')
+    return
+  }
+
+  const doneItem = {
+    uid: String(fileResource.id),
+    name: fileResource.name || 'image',
+    status: 'done' as const,
+    url: fileResource.full_src,
+    thumbUrl: fileResource.full_src,
+    response: body
+  }
+
+  const matched = meta.uid && fileList.value.some((item) => item.uid === meta.uid)
+  fileList.value = matched
+    ? fileList.value.map((item) => (item.uid === meta.uid ? doneItem : item))
+    : [
+        ...fileList.value.filter((item) => item.status !== 'uploading'),
+        doneItem
+      ]
+
+  message.success('تصویر با موفقیت بارگذاری شد')
+  emits('ok', fileResource.id, body)
+}
+
+const customRequest: UploadProps['customRequest'] = createImageCustomRequest({
+  action: () => uploadURL,
+  getHeaders: () => fileHeader.value,
+  messageError: (msg) => message.error(msg),
+  onStarted: () => {
+    loading.value = true
+  },
+  onUploaded: applyUploadedProductImage,
+  onFailed: (_err, meta) => {
+    loading.value = false
+    if (meta.uid) {
+      fileList.value = fileList.value.filter((item) => item.uid !== meta.uid)
+    }
+  }
+})
+
 function handleChange(info: UploadChangeParam) {
   fixFileCapture()
 
   if (info.file.status === 'uploading') {
     loading.value = true
-    return
   }
 
-  if (info.file.status === 'error') {
-    loading.value = false
-    message.error('خطا در بارگذاری')
-  }
-
-  if (info.file.status === 'done') {
-    loading.value = false
-    const fileResource = normalizeUploadFileResponse(info.file.response)
-
-    if (!fileResource?.id || !fileResource.full_src) {
-      fileList.value = fileList.value.filter((item) => item.uid !== info.file.uid)
-      message.error('خطا در ساخت آدرس تصویر')
-      return
-    }
-
-    fileList.value = fileList.value.map((item) =>
-      item.uid === info.file.uid
-        ? {
-            ...item,
-            uid: String(fileResource.id),
-            status: 'done',
-            url: fileResource.full_src,
-            thumbUrl: fileResource.full_src,
-          }
-        : item,
-    )
-    message.success('تصویر با موفقیت بارگذاری شد')
-    emits('ok', fileResource.id, info.file.response)
-  }
   if (info.file.status === 'removed') {
     emits('delete', info.file.uid)
   }