【antd Vue】封装upload图片上传组件（返回Base64）

最近需要把上传的图片信息存储到数据库，以base64的方式，需要重新封装一下antd的upload组件

1. 使用方法

引入组件然后配置一下即可使用，配置项包括

• defaultImageList，需要回显的图片（必传），[ url1, url2 ]
• fileTypeList ，文件格式（可选），默认不做限制
• limitSize ，单个图片大小限制（可选），单位MB
• limitNum ，上传图片个数限制（可选），默认200个
• multiple ，是否可以多选（可选），默认否
• disabled ，是否禁用（可选），默认否

1. 引用组件

2. 组件

2. 封装遇到的坑

因为是自己实现上传逻辑需要使用属性:custom-request="customRequest"
组件的运行顺序是beforeImageUpload->customRequest

1. 一开始的校验需要写在beforeImageUpload中，主要是验证文件格式，文件大小
2. 然后进入自定义的上传逻辑，这里主要是读取图片为base64，然后放入回显的数组中，这样组件就可以显示上传的图片了，此时还需要回调base64
3. handleChange方法主要是删除图片使用，需要过滤出非undefined的，剩余的图片并回传base64