vue3+ant design vue实现表单及文件上传

在Vue3中结合Ant Design Vue (ADVue) 实现表单和文件上传通常会涉及以下几个步骤：

1. 安装依赖：
首先，你需要安装`@ant-design-vue/components`库，它包含丰富的表单组件，包括`<a-form>`、`<a-input>`等。可以使用npm或yarn进行安装：

   npm install @ant-design-vue/components

2. 引入并配置组件：
在你的Vue组件中导入需要的表单和上传组件：

   import { Form, Upload } from '@ant-design-vue/components';

然后，在模板中使用它们：

   <template>
     <div>
       <Form ref="form" :model="formData">
         <!-- 表单字段 -->
         <Upload action="/api/upload" :multiple="true" :on-success="handleSuccess" />
         <!-- 其他表单控件，如 <a-input> -->
       </Form>
     </div>
   </template>

3. 编写数据绑定和事件处理：
- `formData`: 存储表单的数据，例如 `{ fileList: [], name: '' }`。
- `handleSuccess(response, file)`: 文件上传成功后的回调，处理服务器返回的数据以及更新文件列表。

   export default {
     data() {
       return {
         formData: {
           fileList: [],
         },
       };
     },
     methods: {
       handleSubmit(e) {
         this.$refs.form.validate((valid) => {
           if (valid) {
             // 提交表单数据
             this.$refs.form.submit();
           }
         });
       },
       handleSuccess(response, file) {
         // 根据response添加新的文件到fileList
         this.formData.fileList.push(file.response);
       },
     },
   };

4. 表单验证：
ADVue提供了内置的表单验证功能，可以使用`validate`方法检查表单是否有效。例如，你可以添加`rules`属性到`<a-form>`标签内，对特定字段进行验证。