arco-designUI库upload实现进度条加载

vue后台项目的axios都是统一封装的，但是上传视频需要接口的过程来实现进度条的动态效果；视频就只能单独请求接口了，代码如下：

  <a-upload
    :custom-request="videoRequest"
    draggable
    accept="video/*"
    :limit="limit"
    :file-list="fileList"
    :on-before-remove="beforeRemove"
  />

import axios from 'axios';
  /**
   * @function customReques
   * @description 自定义上传行为
   */
  const videoRequest = (option: any) => {
    const { onProgress, onError, onSuccess, fileItem, name } = option;
    emit('videoStateChange', false); // 把上传的状态传递给父组件 false：上传中 true：已上传（包含未上传、上传成功、上传失败）
    axios({
      method: 'post',
      url: base.BASEURL + '/member/file/uploadFile',
      headers: { 'Content-Type': 'multipart/form-data' },
      data: {
        file: fileItem.file,
      },
      timeout: 15000,
      onUploadProgress: (event) => {
        let percent;
        if (event.total > 0) {
          percent = (event.loaded / event.total) * 100;
        }
        onProgress(parseInt(percent, 10), event);
      },
    })
      .then((res: any) => {
        if (res.data.code == 200) {
          onSuccess(res.data.code);
          Message.success(res.message || '上传成功');

          base.fileList.push({
            uid: new Date().getTime(),
            name: fileItem.name,
            url: res.data.data.url || res.data.url,
          });
          emit('videoChange', base.fileList);
        } else {
          onError(res.data.code);
          Message.error(res.message || '上传失败');
        }
        emit('videoStateChange', true); // 把上传的状态传递给父组件
      })
      .catch((err: any) => {
        emit('videoStateChange', true); // 把上传的状态传递给父组件
        onError(504);
        Message.error('视频上传失败，请检查网络或者重试');
      });
  };