title: vben admin 学习记录（四）
id: 12b75dd8-4ed3-4a25-bbc4-cc6a3a1f6974
date: 2023-12-11 00:41:25
auther: liqi
excerpt: vbenadmin Upload组件 这个是文件上传的代码，本身来说按照官网给的就可以调用，但是如果遇到了一些问题，下面会有对应的解决方法 代码

• qian-duan
  tags:

• vue

vbenadmin Upload组件

这个是文件上传的代码，本身来说按照官网给的就可以调用，但是如果遇到了一些问题，下面会有对应的解决方法

代码

<template>
  <BasicDrawer
    v-bind="$attrs"
    @ok="clickOk"
    @register="register"
    title="提交"
    :showFooter="true"
    width="45%"
  >
    <div>
      <BasicForm @register="registerForm" />
    </div>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';

  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';

  import { getTagOption, getClassificationOption, addBlog } from '@/views/bolg/home/api/home';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { uploadApi } from '@/api/sys/upload';
  import { useGo } from "@/hooks/web/usePage";

  const schemas: FormSchema[] = [
    {
      field: 'sort_id',
      component: 'ApiSelect',
      label: '分类',
      componentProps: {
        api: getClassificationOption,
        resultField: 'list',
        // 展示的名字
        labelField: 'name',
        // 展示的值
        valueField: 'id',
        onChange: (e) => {
          console.log('selected:', e);
        },
        onOptionsChange: (options) => {
          console.log('get options', options.length, options);
        },
      },
      required: true,
      colProps: {
        span: 12,
      },
    },
    {
      field: 'tag',
      component: 'ApiSelect',
      label: '标签',
      componentProps: {
        api: getTagOption,
        resultField: 'list',
        // 展示的名字
        labelField: 'name',
        // 展示的值
        valueField: 'id',
      },
      required: true,
      colProps: {
        span: 12,
      },
    },
    // {
    //   field: 'tag',
    //   component: 'Checkbox',
    //   label: '标签',
    //   componentProps: {
    //     // api: getTagOption,
    //     resultField: 'list',
    //     schema: [
    //       {
    //         title:'list'
    //       }
    //     ],
    //     // 展示的名字
    //     labelField: 'name',
    //     // 展示的值
    //     valueField: 'id',
    //   },
    //   required: true,
    //   colProps: {
    //     span: 12,
    //   },
    // },
    {
      field: 'cover',
      component: 'Upload',
      label: '封面',
      componentProps: {
        api: uploadApi,
        onChange: (fileList) => {
          // createMessage.info(`已上传文件${JSON.stringify(list)}`);
          // cover.value = list;
          console.log(`已上传文件${JSON.stringify(fileList)}`)
          const cover = ref();
          cover.value = fileList;
          console.log(fileList)
        },
        emptyHidePreview: true,
        maxNumber: 1,
      },
      colProps: {
        span: 24,
      },
    },
    {
      field: 'excerpt',
      component: 'InputTextArea',
      label: '摘要',
      colProps: {
        span: 24,
      },
    },
  ];
  export default defineComponent({
    components: { BasicDrawer, BasicForm },
    setup() {
      const go = useGo();
      const content = ref();
      const cover = ref();
      const { createMessage, createErrorModal } = useMessage();

      const [registerForm, { getFieldsValue }] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });
      const [register, { closeDrawer }] = useDrawerInner((data) => {
        console.log(data);
        content.value = data;
      });

      function clickOk() {
        var data = [];
        data.form = getFieldsValue();
        data.content = content.value;
        data.cover = cover.value;
        console.log(data.content.title);
        addBlog({
          title: data.content.title,
          content: data.content.content,
          sort_id: data.form.sort_id,
          tag: data.form.tag,
          cover: data.form.cover,
          excerpt: data.form.excerpt,
        }).then((res) => {
          if (res.code == 0) {
            go();
            createMessage.success(res.message);
          } else {
            createErrorModal(res.message);
          }
        });
        closeDrawer();
      }

      function hasChanges(list: string[]) {
        // createMessage.info(`已上传文件${JSON.stringify(list)}`);
        // cover.value = list;
        console.log(`已上传文件${JSON.stringify(list)}`)
        console.log(list)
      }
      return { register, schemas, registerForm, clickOk, cover, hasChanges, };
    },
  });
</script>

上传成功，但fieldList为空

这个可能是vben中组件封装或者你返回值有问题，可以在src/components/Upload/src/UploadModal.vue中修改

//   点击保存
      function handleOk() {
        const { maxNumber } = props;
        if (fileListRef.value.length > maxNumber) {
          return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
        }
        if (isUploadingRef.value) {
          return createMessage.warning(t('component.upload.saveWarn'));
        }
        const fileList: string[] = [];

        for (const item of fileListRef.value) {
          const { status, responseData } = item;
          if (status === UploadResultStatus.SUCCESS && responseData) {
            // 这里之前没有 result result是我返回数据的键，根据你们后端设定的改，后端返回url下标
            console.log(responseData.result.url)
            fileList.push(responseData.result.url);
          }
        }
        // 存在一个上传成功的即可保存
        if (fileList.length <= 0) {
          return createMessage.warning(t('component.upload.saveError'));
        }
        fileListRef.value = [];
        closeModal();
        emit('change', fileList);
      }

开发环境正常，生产环境不能使用

这个情况的话可能是框架原因导致的，目前在修复好之前，有两种解决方案，一种是使用ant的ui自己写，还有就是把src/api/sys/upload.ts中的onUploadProgress注释掉即可暂时解决

import { UploadApiResult } from './model/uploadModel';
import { defHttp } from '/@/utils/http/axios';
import { UploadFileParams } from '/#/axios';
import { useGlobSetting } from '/@/hooks/setting';

const { uploadUrl = '' } = useGlobSetting();

/**
 * @description: Upload interface
 */
export function uploadApi(
  params: UploadFileParams,
  onUploadProgress: (progressEvent: ProgressEvent) => void,
) {
  return defHttp.uploadFile<UploadApiResult>(
    {
      url: uploadUrl,
      // `onUploadProgress`, // 注释掉这个
    },
    params,
  );
}