在开发图片裁切页面时,用到了vue-cropper组件,大概流程是:
- element-upload选择图片
- FileReader().readAsDataURL加载图片获取base64
- cropper组件预览图片
- 完成裁切
其中组件关系:
<upload>
<crop>
……
在上传完成后,readAsDataURL方法将图片读取传值给子组件crop,但此时crop组件的img参数并没有读取到图片数据,巧合地,在开发过程中通过随意改变crop组件的代码导致vue重新加载(热更新)此时crop组件就可以加载出图片,通过此行为可以判断出,子组件在父组件完成操作前已经完成了dom渲染,加上readAsDataURL为异步方法,所以导致crop组件并没有接收到图片数据就完成了渲染。
解决方案:
<upload>
<crop v-if='img!=null' :img='base64'>
……
在crop子组件加载时,我们先通过v-if判断是否完成img数据读取,再去选择性加载crop组件,事实上在本次开发过程中的本意也是如此。按错误写法,打开页面时,crop已经渲染在了页面,由此就可以直接判断出该问题。改正后只会在选择图片后才会出现crop组件元素。
前端道路,任重道远。