1405/02/22-fix bug in upload image in mobile

components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
@@ -34,6 +35,7 @@ declare module '@vue/runtime-core' {
     APagination: typeof import('ant-design-vue/es')['Pagination']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     APopover: typeof import('ant-design-vue/es')['Popover']
+    ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ASelect: typeof import('ant-design-vue/es')['Select']
@@ -46,6 +48,7 @@ declare module '@vue/runtime-core' {
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    AUpload: typeof import('ant-design-vue/es')['Upload']
     BaseButton: typeof import('./src/core/components/BaseButton/index.ts')['default']
     BaseCard: typeof import('./src/core/components/BaseCard/index.ts')['default']
     BaseDatePicker: typeof import('./src/core/components/BaseDatePicker/index.ts')['default']

src/components/ProductUploader/IndexImageUploader.vue

@@ -4,12 +4,14 @@
         class="w-[96px] h-[96px] overflow-hidden border border-solid border-blue-600 bg-gray-50 rounded-md p-2"
     >
       <AUpload
+          accept=".jpg,.jpeg,.png,.webp"
           v-model:file-list="fileList"
           name="file"
           list-type="picture-card"
           :showUploadList="true"
           :multiple="false"
           :action="uploadURL"
+          :capture="undefined"
           :headers="fileHeader"
           :before-upload="beforeUpload"
           @change="handleChange"

src/components/ProductUploader/ProductImageUploader.vue

@@ -3,18 +3,20 @@
     <div class="border border-solid border-blue-600 bg-gray-50 w-full rounded-md p-2">
       <div class="flex">
         <AUpload
-          v-model:file-list="fileList"
-          name="file"
-          list-type="picture-card"
-          :show-upload-list="false"
-          :action="uploadURL"
-          :headers="fileHeader"
-          :showUploadList="true"
-          :before-upload="beforeUpload"
-          @change="handleChange"
+            accept=".jpg,.jpeg,.png,.webp"
+            v-model:file-list="fileList"
+            name="file"
+            list-type="picture-card"
+            :show-upload-list="false"
+            :action="uploadURL"
+            :capture="undefined"
+            :headers="fileHeader"
+            :showUploadList="true"
+            :before-upload="beforeUpload"
+            @change="handleChange"
         >
           <div>
-            <BaseIcon icon="vuesax-linear:add" color="#6B7280" />
+            <BaseIcon icon="vuesax-linear:add" color="#6B7280"/>
             <div class="text-gray-500 text-center text-xs font-normal">بارگذاری فایل</div>
           </div>
         </AUpload>
@@ -24,13 +26,13 @@
 </template>
 
 <script setup lang="ts">
-import type { UploadChangeParam, UploadProps } from 'ant-design-vue'
-import { uploadURL } from '@root/config'
-import { getToken } from '@/utils'
-import { usePrefix } from '@core/composable/usePrefix'
-import { message } from 'ant-design-vue'
+import type {UploadChangeParam, UploadProps} from 'ant-design-vue'
+import {uploadURL} from '@root/config'
+import {getToken} from '@/utils'
+import {usePrefix} from '@core/composable/usePrefix'
+import {message} from 'ant-design-vue'
 
-const { prefixCls } = usePrefix('product-image-uploader')
+const {prefixCls} = usePrefix('product-image-uploader')
 const loading = ref<boolean>(false)
 
 const fileHeader = {
@@ -94,9 +96,11 @@ function handleChange(info: UploadChangeParam) {
     margin: 0 !important;
     border: none;
   }
+
   .ant-upload-picture-card-wrapper {
     width: fit-content;
   }
+
   .ant-upload {
     width: 78px !important;
     height: 78px !important;
@@ -104,18 +108,22 @@ function handleChange(info: UploadChangeParam) {
     border: dashed 1px #93c5fd;
     border-radius: 4px;
   }
+
   .ant-upload-list-picture-card-container {
     margin: 0;
     width: 78px !important;
     height: 78px !important;
   }
+
   .ant-upload-list-picture-card .ant-upload-list-item {
     padding: 0;
     border: none;
   }
+
   .ant-upload-list-picture-card .ant-upload-list-item-info {
     border-radius: 4px;
   }
+
   .ant-upload-list {
     display: flex !important;
     flex-wrap: wrap;