pref:优化企业定制关于上传图片的重复代码

@@ -6,52 +6,21 @@
           <template #logoUpload>
             <ContentUploadText>
               <template #uploadImg>
-                <Upload
-                  name="avatar"
-                  list-type="picture-card"
-                  class="avatar-uploader"
-                  :show-upload-list="false"
-                  @preview="handlePreview"
-                  :customRequest="customUploadLogoPic"
-                  :before-upload="beforeUploadLogoPic"
-                >
-                  <img v-if="logoPic" class="fill-img" :src="logoPic" alt="avatar" />
-                  <div v-else>
-                    <Spin v-if="loading" tip="正在上传中..." />
-                    <PlusOutlined v-else />
-                    <div class="ant-upload-text">上传</div>
-                  </div>
-                </Upload>
+                <CustomUploadComp :imgUrl="logoPic" @setImg="handleSetLogoImgUrl" />
               </template>
               <template #uploadText>
-                <div class="box-outline">
-                  支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
-                </div>
+                <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过5M </div>
               </template>
             </ContentUploadText>
           </template>
           <template #bgUpload>
             <ContentUploadText>
               <template #uploadImg>
-                <Upload
-                  name="avatar"
-                  list-type="picture-card"
-                  class="avatar-uploader"
-                  :show-upload-list="false"
-                  :customRequest="customUploadBgPic"
-                  :before-upload="beforeUploadBgPic"
-                >
-                  <img v-if="bgPic" class="fill-img" :src="bgPic" alt="avatar" />
-                  <div v-else>
-                    <Spin v-if="loading1" tip="正在上传中..." />
-                    <PlusOutlined v-else />
-                    <div class="ant-upload-text">上传</div>
-                  </div>
-                </Upload>
+                <CustomUploadComp :imgUrl="bgPic" @setImg="handleSetBgImgUrl" />
               </template>
               <template #uploadText>
                 <div class="box-outline">
-                  支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过2M
+                  支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过5M
                 </div>
               </template>
             </ContentUploadText>
@@ -83,7 +52,7 @@
               </template>
               <template #uploadText>
                 <div class="box-outline">
-                  支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M
+                  支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过5M
                 </div>
               </template>
             </ContentUploadText>
@@ -108,15 +77,16 @@
   import { defineComponent, ref, unref, onMounted } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { Loading } from '/@/components/Loading/index';
-  import { Card, Upload, Input, Modal, Spin } from 'ant-design-vue';
+  import { Card, Upload, Input, Modal } from 'ant-design-vue';
   import { PlusOutlined } from '@ant-design/icons-vue';
   import { schemas } from '../config/AppDraw.config';
   import { FileItem, FileInfo } from '../types/index';
-  import { logoUpload, bgUpload, resetAppInfo } from '/@/api/oem/index';
+  import { bgUpload, resetAppInfo } from '/@/api/oem/index';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { getAppDesign, updateAppDesign } from '/@/api/oem/index';
   import { Authority } from '/@/components/Authority';
   import ContentUploadText from './ContentUploadText.vue';
+  import { CustomUploadComp } from './customUplaod/index';
 
   export default defineComponent({
     components: {
@@ -129,7 +99,7 @@
       Modal,
       Authority,
       ContentUploadText,
-      Spin,
+      CustomUploadComp,
     },
     setup() {
       const loading = ref(false);
@@ -170,59 +140,20 @@
         previewVisible.value = true;
       };
 
+      const handleSetBgImgUrl = (d) => {
+        bgPic.value = d;
+      };
+
+      const handleSetLogoImgUrl = (d) => {
+        logoPic.value = d;
+      };
+
       // logo图片上传
       const logoPic = ref();
-      async function customUploadLogoPic({ file }) {
-        if (beforeUploadLogoPic(file)) {
-          logoPic.value = '';
-          loading.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await logoUpload(formData);
-          if (response.fileStaticUri) {
-            logoPic.value = response.fileStaticUri;
-            loading.value = false;
-          }
-        }
-      }
-      const beforeUploadLogoPic = (file) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          createMessage.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 < 500;
-        if (!isLt2M) {
-          createMessage.error('图片大小不能超过500KB!');
-        }
-        return isJpgOrPng && isLt2M;
-      };
 
       // 登录页背景上传
       const bgPic = ref();
-      async function customUploadBgPic({ file }) {
-        if (beforeUploadBgPic(file)) {
-          bgPic.value = '';
-          loading1.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await bgUpload(formData);
-          if (response.fileStaticUri) {
-            bgPic.value = response.fileStaticUri;
-            loading1.value = false;
-          }
-        }
-      }
-      const beforeUploadBgPic = (file) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          createMessage.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 / 1024 < 2;
-        if (!isLt2M) {
-          createMessage.error('图片大小不能超过2MB!');
-        }
-        return isJpgOrPng && isLt2M;
-      };
+
       // 首页轮播图
       const fileList = ref<FileItem[]>([]);
       async function customUploadHomeSwiper({ file }) {
@@ -337,10 +268,6 @@
         handleUpdateInfo,
         handleCancel,
         handlePreview,
-        customUploadLogoPic,
-        beforeUploadLogoPic,
-        customUploadBgPic,
-        beforeUploadBgPic,
         customUploadHomeSwiper,
         beforeUploadHomeSwiper,
         handleChange,
@@ -351,6 +278,8 @@
         loading,
         loading1,
         handleResetInfo,
+        handleSetBgImgUrl,
+        handleSetLogoImgUrl,
       };
     },
   });
@@ -371,9 +300,4 @@
     border: 1px dashed #d9d9d9;
     text-align: left;
   }
-
-  .fill-img {
-    width: 100%;
-    height: 100%;
-  }
 </style>

@@ -6,26 +6,10 @@
           <template #logoUpload>
             <ContentUploadText>
               <template #uploadImg>
-                <Upload
-                  name="avatar"
-                  list-type="picture-card"
-                  class="avatar-uploader"
-                  :show-upload-list="false"
-                  :customRequest="customUploadLogoPic"
-                  :before-upload="beforeUploadLogoPic"
-                >
-                  <img class="fill-img" v-if="logoPic" :src="logoPic" alt="avatar" />
-                  <div v-else>
-                    <Spin v-if="loading" tip="正在上传中..." />
-                    <PlusOutlined v-else />
-                    <div class="ant-upload-text">上传</div>
-                  </div>
-                </Upload>
+                <CustomUploadComp :imgUrl="logoPic" @setImg="handleSetLogoImgUrl" />
               </template>
               <template #uploadText>
-                <div class="box-outline">
-                  支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
-                </div>
+                <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过5M </div>
               </template>
             </ContentUploadText>
           </template>
@@ -61,23 +45,7 @@
           <template #bgUpload>
             <ContentUploadText>
               <template #uploadImg>
-                <Upload
-                  name="avatar"
-                  list-type="picture-card"
-                  class="avatar-uploader"
-                  :show-upload-list="false"
-                  :customRequest="customUploadBgPic"
-                  :before-upload="beforeUploadBgPic"
-                >
-                  <img class="fill-img" v-if="bgPic" :src="bgPic" alt="avatar" />
-                  <div v-else>
-                    <div>
-                      <Spin v-if="loading2" tip="正在上传中..." />
-                      <PlusOutlined v-else />
-                      <div class="ant-upload-text">上传</div>
-                    </div>
-                  </div></Upload
-                >
+                <CustomUploadComp :imgUrl="bgPic" @setImg="handleSetBgImgUrl" />
               </template>
               <template #uploadText>
                 <div class="box-outline">
@@ -112,19 +80,13 @@
   import { Loading } from '/@/components/Loading/index';
   import { useMessage } from '/@/hooks/web/useMessage';
   import type { FileItem } from '/@/components/Upload/src/typing';
-  import {
-    logoUpload,
-    iconUpload,
-    bgUpload,
-    getPlatForm,
-    updatePlatForm,
-    resetPlateInfo,
-  } from '/@/api/oem/index';
+  import { iconUpload, getPlatForm, updatePlatForm, resetPlateInfo } from '/@/api/oem/index';
   import { PlusOutlined } from '@ant-design/icons-vue';
   import { useUserStore } from '/@/store/modules/user';
   import { createLocalStorage } from '/@/utils/cache/index';
   import { Authority } from '/@/components/Authority';
   import ContentUploadText from './ContentUploadText.vue';
+  import { CustomUploadComp } from './customUplaod/index';
 
   export default defineComponent({
     components: {
@@ -137,6 +99,7 @@
       Authority,
       ContentUploadText,
       Spin,
+      CustomUploadComp,
     },
     setup() {
       const loading = ref(false);
@@ -163,30 +126,13 @@
       const logoPic = ref();
       const iconPic = ref();
       const bgPic = ref();
-      // logo图片上传
-      async function customUploadLogoPic({ file }) {
-        if (beforeUploadLogoPic(file)) {
-          logoPic.value = '';
-          loading.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await logoUpload(formData);
-          if (response.fileStaticUri) {
-            logoPic.value = response.fileStaticUri;
-            loading.value = false;
-          }
-        }
-      }
-      const beforeUploadLogoPic = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          createMessage.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 < 500;
-        if (!isLt2M) {
-          createMessage.error('图片大小不能超过500KB!');
-        }
-        return isJpgOrPng && isLt2M;
+
+      const handleSetBgImgUrl = (d) => {
+        bgPic.value = d;
+      };
+
+      const handleSetLogoImgUrl = (d) => {
+        logoPic.value = d;
       };
       // Icon上传
       async function customUploadIconPic({ file }) {
@@ -213,32 +159,6 @@
         }
         return isJpgOrPng && isLt2M;
       };
-      // 登录页背景上传
-      async function customUploadBgPic({ file }) {
-        if (beforeUploadBgPic(file)) {
-          bgPic.value = '';
-          loading2.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await bgUpload(formData);
-          if (response.fileStaticUri) {
-            bgPic.value = response.fileStaticUri;
-            loading2.value = false;
-          }
-        }
-      }
-      const beforeUploadBgPic = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          createMessage.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
-        if (!isLt2M) {
-          createMessage.error('图片大小不能超过5MB!');
-        }
-        return isJpgOrPng && isLt2M;
-      };
-
       // 更新
       const handleUpdateInfo = async () => {
         try {
@@ -296,18 +216,16 @@
         logoPic,
         iconPic,
         bgPic,
-        customUploadLogoPic,
-        beforeUploadLogoPic,
         customUploadIconPic,
         beforeUploadIconPic,
-        customUploadBgPic,
-        beforeUploadBgPic,
         compState,
         handleUpdateInfo,
         loading,
         loading1,
         loading2,
         handleResetInfo,
+        handleSetBgImgUrl,
+        handleSetLogoImgUrl,
       };
     },
   });

@@ -5,21 +5,7 @@
         <template #qrcode>
           <ContentUploadText>
             <template #uploadImg>
-              <Upload
-                name="avatar"
-                list-type="picture-card"
-                class="avatar-uploader"
-                :show-upload-list="false"
-                :customRequest="customUploadqrcodePic"
-                :before-upload="beforeUploadqrcodePic"
-              >
-                <img class="fill-img" v-if="qrcodePic" :src="qrcodePic" alt="avatar" />
-                <div v-else>
-                  <Spin v-if="loading" tip="正在上传中..." />
-                  <PlusOutlined v-else />
-                  <div class="ant-upload-text">上传</div>
-                </div></Upload
-              >
+              <CustomUploadComp :imgUrl="qrcodePic" @setImg="handleSetCodeImgUrl" />
             </template>
             <template #uploadText>
               <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M </div>
@@ -46,7 +32,7 @@
 
 <script lang="ts">
   import { defineComponent, onMounted, ref, computed } from 'vue';
-  import { Card, Upload, Spin } from 'ant-design-vue';
+  import { Card } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { schemas, provSchemas } from '../config/enterPriseInfo.config';
   import { getAreaList, getEnterPriseDetail, updateEnterPriseDetail } from '/@/api/oem/index';
@@ -54,25 +40,21 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useUserStore } from '/@/store/modules/user';
   import { createLocalStorage } from '/@/utils/cache';
-  import { PlusOutlined } from '@ant-design/icons-vue';
-  import { qrcodeUpload } from '/@/api/oem/index';
-  import type { FileItem } from '/@/components/Upload/src/typing';
   import type { CityItem, Code } from '../types';
   import { Authority } from '/@/components/Authority';
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
   import ContentUploadText from './ContentUploadText.vue';
+  import { CustomUploadComp } from './customUplaod/index';
 
   export default defineComponent({
     components: {
       Card,
       BasicForm,
       Loading,
-      Upload,
-      PlusOutlined,
       Authority,
       ContentUploadText,
-      Spin,
+      CustomUploadComp,
     },
     setup() {
       const userInfo: any = getAuthCache(USER_INFO_KEY);
@@ -119,30 +101,8 @@
       const { createMessage } = useMessage();
 
       const qrcodePic = ref();
-      const customUploadqrcodePic = async ({ file }) => {
-        clearValidate('qrcode');
-        if (beforeUploadqrcodePic(file)) {
-          qrcodePic.value = '';
-          loading.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await qrcodeUpload(formData);
-          if (response.fileStaticUri) {
-            qrcodePic.value = response.fileStaticUri;
-            loading.value = false;
-          }
-        }
-      };
-      const beforeUploadqrcodePic = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          createMessage.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
-        if (!isLt2M) {
-          createMessage.error('图片大小不能超过5MB!');
-        }
-        return isJpgOrPng && isLt2M;
+      const handleSetCodeImgUrl = (d) => {
+        qrcodePic.value = d;
       };
       // 更新
       const handleUpdateInfo = async () => {
@@ -372,11 +332,10 @@
         compState,
         qrcodePic,
         handleUpdateInfo,
-        customUploadqrcodePic,
-        beforeUploadqrcodePic,
         registerCustomForm,
         loading,
         isWhereAdmin,
+        handleSetCodeImgUrl,
       };
     },
   });

+<script setup name="CustomUploadComp" lang="ts">
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { Upload, Spin } from 'ant-design-vue';
+  import { ref, watchEffect } from 'vue';
+  import { useUpload } from './hooks/useUploadFile.hook';
+  import { logoUpload } from '/@/api/oem';
+
+  const props = withDefaults(
+    defineProps<{
+      imgUrl: string;
+    }>(),
+    {
+      imgUrl: '',
+    }
+  );
+  const emit = defineEmits(['setImg']);
+
+  const { beforeUploadVerify } = useUpload();
+
+  const uploadLoading = ref(false);
+
+  const uploadImgUrl = ref('');
+
+  //上传图片接口
+  const customUpload = async ({ file }) => {
+    try {
+      if (beforeUploadVerify(file)) {
+        uploadImgUrl.value = '';
+        uploadLoading.value = true;
+        const formData = new FormData();
+        formData.append('file', file);
+        const response = await logoUpload(formData);
+        if (response.fileStaticUri) {
+          uploadImgUrl.value = response.fileStaticUri;
+          emit('setImg', uploadImgUrl.value);
+        }
+      }
+    } finally {
+      uploadLoading.value = false;
+    }
+  };
+
+  watchEffect(() => {
+    init();
+  });
+  function init() {
+    if (!props.imgUrl) uploadImgUrl.value = '';
+    uploadImgUrl.value = props.imgUrl;
+  }
+</script>
+
+<template>
+  <div>
+    <Upload
+      name="avatar"
+      list-type="picture-card"
+      class="avatar-uploader"
+      :show-upload-list="false"
+      :customRequest="customUpload"
+      :before-upload="beforeUploadVerify"
+    >
+      <img v-if="uploadImgUrl" class="fill-img" :src="uploadImgUrl" alt="avatar" />
+      <div v-else>
+        <Spin v-if="uploadLoading" tip="正在上传中..." />
+        <PlusOutlined v-else />
+        <div class="ant-upload-text">上传</div>
+      </div>
+    </Upload>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .fill-img {
+    width: 100%;
+    height: 100%;
+  }
+</style>

+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createMessage } = useMessage();
+
+export const useUpload = () => {
+  //验证图片类型和大小
+  const beforeUploadVerify = ({ type, size }) => {
+    const isJpgOrPng = type === 'image/jpeg' || type === 'image/png';
+    if (!isJpgOrPng) {
+      createMessage.error('只能上传图片文件!');
+    }
+    const limitImgSize = (size as number) / 1024 / 1024 < 5;
+    if (!limitImgSize) {
+      createMessage.error('图片大小不能超过5MB!');
+    }
+    return isJpgOrPng && limitImgSize;
+  };
+  return {
+    beforeUploadVerify,
+  };
+};

+import CustomUploadComp from './CustomUploadComp.vue';
+export { CustomUploadComp };