最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件
1. 使用方法
引入组件然后配置一下即可使用,配置项包括
- defaultImageList,需要回显的图片(必传),[ url1, url2 ]
- fileTypeList ,文件格式(可选),默认不做限制
- limitSize ,单个图片大小限制(可选),单位MB
- limitNum ,上传图片个数限制(可选),默认200个
- multiple ,是否可以多选(可选),默认否
- disabled ,是否禁用(可选),默认否
引用组件
组件
2. 封装遇到的坑
因为是自己实现上传逻辑需要使用属性:custom-request="customRequest"
组件的运行顺序是beforeImageUpload
->customRequest
- 一开始的校验需要写在beforeImageUpload中,主要是验证文件格式,文件大小
- 然后进入自定义的上传逻辑,这里主要是读取图片为base64,然后放入回显的数组中,这样组件就可以显示上传的图片了,此时还需要回调base64
- handleChange方法主要是删除图片使用,需要过滤出非undefined的,剩余的图片并回传base64