Ant Design Vue 图片上传校验

Ant Design Vue 的图片上传功能通常会结合其提供的 `Upload` 组件来进行，它提供了方便的文件上传以及验证机制。当你需要上传图片并进行校验时，可以按照以下步骤操作：

1. 首先，在组件内导入 `Upload` 组件及其相关的样式：

   <template>
     <a-upload :action="uploadUrl"
             :rules="fileRules"
             :before-upload="beforeUpload"
             :on-success="handleSuccess"
             ...>
       <a-button type="primary" size="small">点击上传</a-button>
     </a-upload>
   </template>

2. 定义 `fileRules` 属性用于设置上传规则，例如限制图片大小、格式等：

   export default {
     data() {
       return {
         fileRules: [
           { required: true, message: '请上传图片', type: 'string' },
           { max: 1024 * 1024 * 5, message: '图片不能超过5MB', type: 'size' },
           { validator: validateImageType, message: '只允许上传jpg/png格式的图片' }
         ],
         // 更多验证规则...
       };
     },
     methods: {
       // 其他方法...
       validateImageType(file) {
         const allowedTypes = ['image/jpeg', 'image/png'];
         if (!allowedTypes.includes(file.type)) {
           return false;
         }
         return true;
       },
       // 其他处理函数如beforeUpload, handleSuccess...
     }
   }

- `beforeUpload` 函数可以用来做服务器预检或者客户端的即时校验，比如检查是否已经存在同名文件等。

- `onSuccess` 是在上传成功后触发的回调，你可以在这里获取到上传成功的图片信息。