在antdesgin中 a-Upload 上传事添加loading效果

在Ant Design Vue (a-design) 中，`a-upload` 组件用于文件上传，如果你想添加上传过程中的 loading 效果，可以按照以下步骤操作：

1. 首先，在`a-upload`组件上设置一个 `loading` 属性，它接受一个布尔值或者一个自定义的 loading 组件实例。例如，你可以将其设置为 `true` 来显示默认的 loading 模态。

   <a-upload :loading="uploadLoading" action="/api/upload">
     <!-- 这里放你的上传按钮或选择文件的元素 -->
   </a-upload>

2. 初始化一个变量 `uploadLoading` 并控制其状态。当开始上传时设为 `true`，完成上传后设为 `false`。你可以通过监听上传事件来管理这个状态。

   data() {
     return {
       uploadLoading: false,
     };
   },
   
   methods: {
     handleUploadStart() {
       this.uploadLoading = true; // 开始上传时显示 loading
     },
     handleUploadSuccess(response) {
       // 上传成功后处理响应并关闭 loading
       this.uploadLoading = false;
       console.log(response);
     },
     handleUploadError(error) {
       // 错误处理
       this.uploadLoading = false;
       console.error('上传失败:', error);
     },
   },

3. 当用户触发上传时，调用对应的上传方法，并且在方法内部更新 `uploadLoading` 的值。

   <template>
     <button @click="handleFileSelect">选择文件</button>
   </template>

   <script>
   //...
   methods: {
     // ...
     handleFileSelect() {
       this.handleUploadStart(); // 显示 loading
       // 实际的上传逻辑，这里仅做示例
       setTimeout(() => {
         this.$http.post('/api/upload', file).then(this.handleUploadSuccess, this.handleUploadError);
       }, 2000); // 假设模拟2秒上传时间
     },
   }
   //...
   </script>

这样，当你点击“选择文件”或实际触发上传操作时，就会显示一个加载动画直到上传完成。