封装antd上传组件vue

在Vue项目中封装Ant Design Vue (简称AV) 的 Upload 组件可以帮助你更方便地管理文件上传的功能，并保持代码整洁。以下是步骤概述：

1. **安装依赖**：
首先需要安装 `@antv/vue-upload` 和 `axios` 或者 `fetch` 等用于发送请求的库。可以使用 npm 或 yarn 安装：

   npm install @antv/vue-upload axios

2. **创建封装的Upload组件**：
创建一个名为 `Upload.vue` 的文件，例如：

   <template>
     <a-upload :action="uploadUrl" :on-success="handleSuccess" :before-upload="beforeUpload">
       <a-icon type="upload" slot="trigger"></a-icon>
       <p slot="text">点击上传</p>
       <a-button type="primary" slot="dragger" @click="submitFile">选择文件</a-button>
     </a-upload>
   </template>

   <script>
   export default {
     components: { ... },
     data() {
       return {
         uploadUrl: '',
         file: {},
         submitting: false,
       };
     },
     methods: {
       beforeUpload(file) {
         // 可以在这里做预处理，比如检查文件类型、大小等
         if (/* your conditions */) {
           return true;
         }
         return false;
       },
       handleSubmit() {
         this.submitting = true;
       },
       handleSuccess(res) {
         this.file = {};
         this.submitting = false;
         console.log('上传成功', res);
       },
     },
   };
   </script>

3. **在父组件中使用**：
在需要上传功能的地方引入并使用这个封装好的 Upload 组件，传入相应的 URL 和其他配置选项。

4. **额外配置**：
- 如果需要上传文件前的验证，可以在 `beforeUpload` 方法中添加自定义逻辑。
- 可以设置上传进度条、断点续传等功能，查看 Ant Design Vue Upload 文档获取更多信息。