antdesign vue2 文件上传loading时加前端虚拟进度

对于 antdesign vue2 文件上传组件，可以通过监听上传进度事件来实现前端虚拟进度的效果。具体操作如下：

1. 在上传组件中添加 onProgress 属性，并绑定一个方法来处理上传进度事件：

<Upload
  action="/api/upload"
  onProgress="handleProgress"
>
  <Button>上传文件</Button>
</Upload>

2. 在组件的 methods 中定义 handleProgress 方法，并计算当前上传进度：

methods: {
  handleProgress(event, file, fileList) {
    // 计算上传进度
    const percent = (event.loaded / event.total) * 100;
    // 更新进度条
    this.$refs.progress.update(percent);
  }
}

3. 在组件中添加一个进度条组件，并引用它的实例：

<template>
  <div>
    <Upload
      action="/api/upload"
      onProgress="handleProgress"
    >
      <Button>上传文件</Button>
    </Upload>
    <Progress ref="progress" />
  </div>
</template>

<script>
import { Upload, Button, Progress } from 'ant-design-vue';

export default {
  components: {
    Upload,
    Button,
    Progress
  },
  methods: {
    handleProgress(event, file, fileList) {
      // 计算上传进度
      const percent = (event.loaded / event.total) * 100;
      // 更新进度条
      this.$refs.progress.update(percent);
    }
  }
};
</script>

这样，当文件上传的过程中，进度条会随着上传进度变化而实时更新，实现了前端虚拟进度的效果。