VbenAdmin 使用CropperAvatar进行头像上传 @change 获取不到 uploadAPI返回的参数

我也是刚学vue3和vben属于那种vue3只学了皮毛的小白
今天在用vben的时候想用vben自带的组件CropperAvatar来进行头像的上传 按照官网的文档来了一遍后发现
change函数的中的参数value 其实是base64编码格式的图片

代码

<template>
  <PageWrapper
    title="admin用户数据表单"
    contentBackground
    content="修改admin用户数据"
    contentClass="p-4"
  >
    <BasicForm @register="register">
      <template #avatar="{ model, field }">
        <CropperAvatar
          :uploadApi="uploadAvatar"
          :value="model[field]"
          @change="uploadAvatatAfter"
        />
      </template>
    </BasicForm>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { BasicModal } from '/@/components/modal/index';
  import { BasicForm, useForm } from '/@/components/Form';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { schemas } from '/@/views/system/adminuser/components/datafrom';
  import { useRoute } from 'vue-router';
  import { onMounted, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';

  import { CropperAvatar } from '/@/components/Cropper';
  import { queryById, uploadAvatar } from '/@/api/system/adminuser';
  const { createMessage } = useMessage();
  const route = useRoute();
  const [register, { validate, setProps, getFieldsValue, setFieldsValue, appendSchemaByField }] =
    useForm({
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 15,
      },
      schemas: schemas,
      actionColOptions: {
        offset: 8,
        span: 23,
      },
      submitButtonOptions: {
        text: '提交',
      },
      submitFunc: customSubmitFunc,
    });
  onMounted(() => {
    initFromBYApi();
  });
  async function initFromBYApi() {
    const uservo = await queryById({ id: route.params.id });
    setFieldsValue({
      avatar: uservo.avatar,
      nickname: uservo.nickname,
      'role.id': uservo.role.id,
      status: uservo.status,
    });
  }
  //这里是上传头像成功后的回调
  function uploadAvatatAfter(value) {
    console.log(value);
    //修改表单的值
    setFieldsValue({
      avatar: value,
    });
  }
  async function customSubmitFunc() {
    try {
      let formvalues = await getFieldsValue();
      console.log(formvalues);
      await validate();
      setProps({
        submitButtonOptions: {
          loading: true,
        },
      });
      setTimeout(() => {
        setProps({
          submitButtonOptions: {
            loading: false,
          },
        });
        createMessage.success('提交成功！');
      }, 2000);
    } catch (error) {
      console.log(error);
    }
  }
</script>

然而这并不是咱们想要的结果

不多说直接来解决方案

进入到src\components\Cropper\src\CropperAvatar.vue组件内
找到这CopperModal uploadApi是在CopperModal里执行的

  <CopperModal
      @register="register"
      @uploadSuccess="handleUploadSuccess"
      :uploadApi="uploadApi"
      :src="sourceValue"
    />

进入src\components\Cropper\src\CopperModal.vue 找到handleOk方法 就知道 会触发父组件方法uploadSuccess

 async function handleOk() {
        const uploadApi = props.uploadApi;
        if (uploadApi && isFunction(uploadApi)) {
          const blob = dataURLtoBlob(previewSource.value);
          try {
            setModalProps({ confirmLoading: true });
            const result = await uploadApi({ name: 'file', file: blob, filename });
            //重点是这里
            emit('uploadSuccess', { source: previewSource.value, data: result.data });
            closeModal();
          } finally {
            setModalProps({ confirmLoading: false });
          }
        }
      }

咱们回到CropperAvatar.vue 的handleUploadSuccess方法处

 function handleUploadSuccess({ source }) {
        sourceValue.value = source;
        emit('change', source);
        createMessage.success(t('component.cropper.uploadSuccess'));
      }

修改为下面这种写法

  function handleUploadSuccess({ source, data }) {
        sourceValue.value = source;
        emit('change', { source, data });
        createMessage.success(t('component.cropper.uploadSuccess'));
      }

之后在@change函数的写法改成这样

function uploadAvatatAfter({ source, data }) {
    console.log(data)
  }

这样咱们就拿到了请求uploadApi之后返回的参数了