fix: 上传小图片转换base64

src/utils/file/base64Conver.ts

@@ -13,7 +13,23 @@ export function dataURLtoBlob(base64Buf: string): Blob {
   }
   return new Blob([u8arr], { type: mime });
 }
-
+/**
+ * img url to base64
+ * @param url
+ */
+export function fileToBase64(file: File): Promise<string | ArrayBuffer> {
+  return new Promise((resolve, reject) => {
+    if (!file) {
+      reject();
+    }
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = function (e) {
+      const result = e.target.result;
+      resolve(result);
+    };
+  });
+}
 /**
  * img url to base64
  * @param url

src/views/sys/sysSetting/sysConfig.vue

@@ -1,15 +1,14 @@
 <template>
   <div>
     <BasicForm @register="registerForm" layout="vertical">
-      <template #logo="{ model, field }">
+      <template #logo>
         <Upload
           name="file"
-          @change="handleChange"
-          :action="uploadUrl"
           :showUploadList="false"
+          :beforeUpload="handleBeforeUpload"
           accept=".jpg,.jpeg,.gif,.png,.webp"
         >
-          <img :src="model[field]" class="img-avatar" />
+          <img :src="logo" class="img-avatar" />
         </Upload>
       </template>
     </BasicForm>
@@ -21,17 +20,17 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { dataFormSchema } from './data';
-  import { useGlobSetting } from '/@/hooks/setting';
   import { Upload } from 'ant-design-vue';
   import { sysSettingEdit, sysSettingDetail } from '/@/api/sys/sysSettingApi';
-  import { onMounted } from 'vue';
+  import { onMounted, ref } from 'vue';
+  import { fileToBase64 } from '/@/utils/file/base64Conver';
 
   onMounted(async () => {
     const res = await sysSettingDetail();
+    logo.value = res.logo;
     await setFieldsValue({ ...res });
   });
 
-  const { uploadUrl } = useGlobSetting();
   const { createMessage } = useMessage();
   const [registerForm, { setFieldsValue, validate }] = useForm({
     labelWidth: 120,
@@ -48,17 +47,20 @@
     },
   });
 
+  const logo = ref(null);
+
   // 提交按钮事件
   async function handleSubmit() {
     const values = await validate();
-    console.log('🚀 ~ file: sysConfig.vue:60 ~ handleSubmit ~ values:', values);
+    if (logo.value) {
+      values.logo = logo.value;
+    }
     await sysSettingEdit(values);
     createMessage.success('修改成功');
-    // await sysPosEdit({ ...values, id: rowId.value });
   }
-
-  function handleChange(val) {
-    console.log('🚀 ~ file: sysConfig.vue:64 ~ handleChange ~ val:', val);
+  async function handleBeforeUpload(file) {
+    logo.value = await fileToBase64(file);
+    return false;
   }
 </script>