antd UpLoad 的 Dragger 加 ImgCrop 实现自定义上传及剪切
前言本次封装的组件主要应用于自定义上传,上传过程中组件只用于展示图片,获取图片的obj转为base64return到组件外部在需要调接口时进行参数上传
·
前言本次封装的组件主要应用于自定义上传,上传过程中组件只用于展示图片,获取图片的obj转为base64return到组件外部在需要调接口时进行参数上传
1. 使用 Dragger 需要 const {Dragger} =Upload ;
2.组件部分
内部div 是根据value值的是否存在进行判断组件展示的样式是默认还是更新后
组件外部包裹了剪切插件组件 ImgCrop api-aspect是宽高比例 onModalOk是点击确定的回调,beforeCrop 自定义的规则校验
内部组件和Upload同理
3.函数方法部分
上传规则校验
自定义上传及确定回调
自定义上传方法部分因为我们只用到展示的图片所以只要判断组件是否返回file即可知道是否上传成功,
onSuccess部分会在你的点击后调用参数格式需要和你点击事件一样,我们在确定回调方法里面进行判断当图片的回调获取到后调取转base64方法
base64方法及获取图片宽高方法
在这里我们对图片进行二进制的转换,并调用value更新方法将值返回到组件外部的父组件
更新value方法
onChange方法是在外部传进的方法此时父组件的方法就可以获取到内部更新的值
更多推荐
所有评论(0)