pref:优化个人头像上传头像使用组件

@@ -179,14 +179,22 @@
         cropper?.value?.[event]?.(arg);
       }
 
+      const blobToFile = (blob, fileName) => {
+        const file = new File([blob], fileName, { type: blob.type });
+        const formData = new FormData();
+        formData.append('file', file);
+        return formData;
+      };
+
       async function handleOk() {
         const uploadApi = props.uploadApi;
         if (uploadApi && isFunction(uploadApi)) {
           const blob = dataURLtoBlob(previewSource.value);
+          const base64D = blobToFile(blob, filename);
           try {
             setModalProps({ confirmLoading: true });
-            const result = await uploadApi({ name: 'file', file: blob, filename });
-            emit('uploadSuccess', { source: previewSource.value, data: result.data });
+            const result = await uploadApi(base64D);
+            emit('uploadSuccess', { source: previewSource.value, data: result.fileStaticUri });
             closeModal();
           } finally {
             setModalProps({ confirmLoading: false });

-<template>
-  <div :class="getClass" :style="getStyle">
-    <div :class="`${prefixCls}-image-wrapper`" :style="getImageWrapperStyle" @click="openModal">
-      <div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
-        <Icon
-          icon="ant-design:cloud-upload-outlined"
-          :size="getIconWidth"
-          :style="getImageWrapperStyle"
-          color="#d6d6d6"
-        />
-      </div>
-      <img :src="sourceValue" v-if="sourceValue" alt="avatar" />
-    </div>
-    <a-button
-      :class="`${prefixCls}-upload-btn`"
-      @click="openModal"
-      v-if="showBtn"
-      v-bind="btnProps"
-    >
-      {{ btnText ? btnText : t('component.cropper.selectImage') }}
-    </a-button>
-
-    <CopperModal
-      @register="register"
-      @uploadSuccess="handleUploadSuccess"
-      :uploadApi="uploadApi"
-      :src="sourceValue"
-    />
-  </div>
-</template>
-<script lang="ts">
-  import {
-    defineComponent,
-    computed,
-    CSSProperties,
-    unref,
-    ref,
-    watchEffect,
-    watch,
-    PropType,
-  } from 'vue';
-  import CopperModal from './CopperModal.vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useModal } from '/@/components/Modal';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import type { ButtonProps } from '/@/components/Button';
-  import Icon from '/@/components/Icon';
-
-  const props = {
-    width: { type: [String, Number], default: '200px' },
-    value: { type: String },
-    showBtn: { type: Boolean, default: true },
-    btnProps: { type: Object as PropType<ButtonProps> },
-    btnText: { type: String, default: '' },
-    uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> },
-  };
-
-  export default defineComponent({
-    name: 'CropperAvatar',
-    components: { CopperModal, Icon },
-    props,
-    emits: ['update:value', 'change'],
-    setup(props, { emit, expose }) {
-      const sourceValue = ref(props.value || '');
-      const { prefixCls } = useDesign('cropper-avatar');
-      const [register, { openModal, closeModal }] = useModal();
-      const { createMessage } = useMessage();
-      const { t } = useI18n();
-
-      const getClass = computed(() => [prefixCls]);
-
-      const getWidth = computed(() => `${props.width}`.replace(/px/, '') + 'px');
-
-      const getIconWidth = computed(() => parseInt(`${props.width}`.replace(/px/, '')) / 2 + 'px');
-
-      const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
-
-      const getImageWrapperStyle = computed(
-        (): CSSProperties => ({ width: unref(getWidth), height: unref(getWidth) })
-      );
-
-      watchEffect(() => {
-        sourceValue.value = props.value || '';
-      });
-
-      watch(
-        () => sourceValue.value,
-        (v: string) => {
-          emit('update:value', v);
-        }
-      );
-
-      function handleUploadSuccess(source) {
-        sourceValue.value = source;
-        emit('change', source);
-        createMessage.success(t('component.cropper.uploadSuccess'));
-      }
-
-      expose({ openModal: openModal.bind(null, true), closeModal });
-
-      return {
-        t,
-        prefixCls,
-        register,
-        openModal,
-        getIconWidth,
-        sourceValue,
-        getClass,
-        getImageWrapperStyle,
-        getStyle,
-        handleUploadSuccess,
-      };
-    },
-  });
-</script>
-
-<style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-cropper-avatar';
-
-  .@{prefix-cls} {
-    display: inline-block;
-    text-align: center;
-
-    &-image-wrapper {
-      overflow: hidden;
-      cursor: pointer;
-      background: @component-background;
-      border: 1px solid @border-color-base;
-      border-radius: 50%;
-
-      img {
-        width: 100%;
-      }
-    }
-
-    &-image-mask {
-      opacity: 0;
-      position: absolute;
-      width: inherit;
-      height: inherit;
-      border-radius: inherit;
-      border: inherit;
-      background: rgba(0, 0, 0, 0.4);
-      cursor: pointer;
-      -webkit-transition: opacity 0.4s;
-      transition: opacity 0.4s;
-
-      :deep(svg) {
-        margin: auto;
-      }
-    }
-
-    &-image-mask:hover {
-      opacity: 40;
-    }
-
-    &-upload-btn {
-      margin: 10px auto;
-    }
-  }
-</style>
+<template>
+  <div :class="getClass" :style="getStyle">
+    <div :class="`${prefixCls}-image-wrapper`" :style="getImageWrapperStyle" @click="openModal">
+      <div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
+        <Icon
+          icon="ant-design:cloud-upload-outlined"
+          :size="getIconWidth"
+          :style="getImageWrapperStyle"
+          color="#d6d6d6"
+        />
+      </div>
+      <img :src="sourceValue" v-if="sourceValue" alt="avatar" />
+    </div>
+    <a-button
+      :class="`${prefixCls}-upload-btn`"
+      @click="openModal"
+      v-if="showBtn"
+      v-bind="btnProps"
+    >
+      {{ btnText ? btnText : t('component.cropper.selectImage') }}
+    </a-button>
+
+    <CopperModal
+      @register="register"
+      @uploadSuccess="handleUploadSuccess"
+      :uploadApi="uploadApi"
+      :src="sourceValue"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import {
+    defineComponent,
+    computed,
+    CSSProperties,
+    unref,
+    ref,
+    watchEffect,
+    watch,
+    PropType,
+  } from 'vue';
+  import CopperModal from './CopperModal.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import type { ButtonProps } from '/@/components/Button';
+  import Icon from '/@/components/Icon';
+
+  const props = {
+    width: { type: [String, Number], default: '200px' },
+    value: { type: String },
+    showBtn: { type: Boolean, default: true },
+    btnProps: { type: Object as PropType<ButtonProps> },
+    btnText: { type: String, default: '' },
+    uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> },
+  };
+
+  export default defineComponent({
+    name: 'CropperAvatar',
+    components: { CopperModal, Icon },
+    props,
+    emits: ['update:value', 'change'],
+    setup(props, { emit, expose }) {
+      const sourceValue = ref(props.value || '');
+      const { prefixCls } = useDesign('cropper-avatar');
+      const [register, { openModal, closeModal }] = useModal();
+      const { createMessage } = useMessage();
+      const { t } = useI18n();
+
+      const getClass = computed(() => [prefixCls]);
+
+      const getWidth = computed(() => `${props.width}`.replace(/px/, '') + 'px');
+
+      const getIconWidth = computed(() => parseInt(`${props.width}`.replace(/px/, '')) / 2 + 'px');
+
+      const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
+
+      const getImageWrapperStyle = computed(
+        (): CSSProperties => ({ width: unref(getWidth), height: unref(getWidth) })
+      );
+
+      watchEffect(() => {
+        sourceValue.value = props.value || '';
+      });
+
+      watch(
+        () => sourceValue.value,
+        (v: string) => {
+          emit('update:value', v);
+        }
+      );
+
+      function handleUploadSuccess(source) {
+        sourceValue.value = source.data;
+        emit('change', source);
+        createMessage.success(t('component.cropper.uploadSuccess'));
+      }
+
+      expose({ openModal: openModal.bind(null, true), closeModal });
+
+      return {
+        t,
+        prefixCls,
+        register,
+        openModal,
+        getIconWidth,
+        sourceValue,
+        getClass,
+        getImageWrapperStyle,
+        getStyle,
+        handleUploadSuccess,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-cropper-avatar';
+
+  .@{prefix-cls} {
+    display: inline-block;
+    text-align: center;
+
+    &-image-wrapper {
+      overflow: hidden;
+      cursor: pointer;
+      background: @component-background;
+      border: 1px solid @border-color-base;
+      border-radius: 50%;
+
+      img {
+        width: 100%;
+      }
+    }
+
+    &-image-mask {
+      opacity: 0;
+      position: absolute;
+      width: inherit;
+      height: inherit;
+      border-radius: inherit;
+      border: inherit;
+      background: rgba(0, 0, 0, 0.4);
+      cursor: pointer;
+      -webkit-transition: opacity 0.4s;
+      transition: opacity 0.4s;
+
+      :deep(svg) {
+        margin: auto;
+      }
+    }
+
+    &-image-mask:hover {
+      opacity: 40;
+    }
+
+    &-upload-btn {
+      margin: 10px auto;
+    }
+  }
+</style>

@@ -13,30 +13,9 @@
         <div class="text-center cursor-pointer">
           <div class="text-left text-lg border-gray-200 p-2 border">个人头像</div>
           <div class="flex items-center justify-center mt-4">
-            <Upload
-              name="avatar"
-              list-type="picture-card"
-              class="round !flex justify-center items-center"
-              :show-upload-list="false"
-              :customRequest="customUpload"
-              :before-upload="beforeUpload"
-            >
-              <img
-                class="round"
-                v-if="personalPicture || headerImg"
-                :src="personalPicture || headerImg"
-                alt="avatar"
-              />
-              <div v-else>
-                <div>
-                  <LoadingOutlined class="text-3xl" v-if="loading" />
-                  <PlusOutlined v-else class="text-3xl" />
-                </div>
-              </div>
-            </Upload>
+            <CropperAvatar @change="handleChange" :uploadApi="uploadApi" :value="personalPicture" />
           </div>
         </div>
-
         <Description @register="registerDesc" class="mt-8 p-4" />
       </div>
       <div class="ml-4 border border-gray-200">
@@ -49,22 +28,19 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
+  import { defineComponent, ref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal/index';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './config';
   import { Description, DescItem, useDescription } from '/@/components/Description/index';
   import { uploadApi, personalPut } from '/@/api/personal/index';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { Upload } from 'ant-design-vue';
-  import { PlusOutlined } from '@ant-design/icons-vue';
   import { useUserStore } from '/@/store/modules/user';
-  import type { FileItem } from '/@/components/Upload/src/typing';
-  import { LoadingOutlined } from '@ant-design/icons-vue';
   import headerImg from '/@/assets/images/logo.png';
   import { getMyInfo } from '/@/api/sys/user';
   import { UserInfoModel } from '/@/api/sys/model/userModel';
   import { UserInfo } from '/#/store';
+  import { CropperAvatar } from '/@/components/Cropper';
 
   const schema: DescItem[] = [
     {
@@ -95,7 +71,12 @@
 
   export default defineComponent({
     name: 'Index',
-    components: { BasicModal, BasicForm, Description, Upload, PlusOutlined, LoadingOutlined },
+    components: {
+      BasicModal,
+      BasicForm,
+      Description,
+      CropperAvatar,
+    },
     emits: ['refreshPersonal', 'register'],
     setup(_, { emit }) {
       const loading = ref(false);
@@ -111,31 +92,8 @@
         column: 1,
         bordered: true,
       });
-
-      const customUpload = async ({ file }) => {
-        if (beforeUpload(file)) {
-          personalPicture.value = '';
-          loading.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await uploadApi(formData);
-          if (response.fileStaticUri) {
-            personalPicture.value = response.fileStaticUri;
-            loading.value = false;
-          }
-        }
-      };
-
-      const beforeUpload = (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 handleChange = (e) => {
+        personalPicture.value = e.data;
       };
 
       const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
@@ -146,7 +104,7 @@
       const [registerModal, { closeModal }] = useModalInner(async () => {
         const info = await getMyInfo();
         personalInfo.value = info;
-        personalPicture.value = info.avatar;
+        personalPicture.value = info.avatar || headerImg;
         setFieldsValue(info);
         setDescProps({ data: info });
       });
@@ -157,7 +115,7 @@
         const record = await personalPut({
           ...value,
           id: userInfo.userId,
-          avatar: unref(personalPicture),
+          avatar: personalPicture.value,
         });
 
         userStore.setUserInfo(record as unknown as UserInfo);
@@ -171,13 +129,13 @@
         personalInfo,
         registerDesc,
         personalPicture,
-        beforeUpload,
-        customUpload,
         handleSubmit,
         registerModal,
         registerForm,
         loading,
         headerImg,
+        uploadApi,
+        handleChange,
       };
     },
   });