antdv使用upload组件上传文件怎么加进度条vue3实现

您好，关于您的问题，可以通过监听 upload 组件的 onChange 事件，获取上传进度值并显示在页面中，从而实现上传进度条的效果。以下是示例代码：

<template>
  <div>
    <a-upload
      :action="uploadUrl"
      :show-upload-list="false"
      :before-upload="beforeUpload"
      :on-progress="onUploadProgress"
    >
      <a-button>上传文件</a-button>
    </a-upload>
    <a-progress :percent="uploadPercent" />
  </div>
</template>

<script>
import { ref } from 'vue';
import { message } from 'ant-design-vue';

export default {
  setup() {
    const uploadUrl = 'your upload url'; // 上传接口地址
    const uploadPercent = ref(0); // 初始化上传进度为0

    // 上传前的操作
    const beforeUpload = (file) => {
      // 可以在此处对上传的文件进行校验等操作
    };

    // 上传进度变化时的操作
    const onUploadProgress = (progressEvent) => {
      if (progressEvent.total > 0) {
        uploadPercent.value = Math.round((progressEvent.loaded / progressEvent.total) * 100); // 计算上传进度
      }
    };

    return {
      uploadUrl,
      uploadPercent,
      beforeUpload,
      onUploadProgress,
    };
  },
};
</script>

希望可以帮到您！