element ui图片上传-实现单图上传

1. 业务需求:

需要把多图上传的效果改造成为单图上传的效果

2. 效果展示

(1) 原来官网效果:

https://element.eleme.cn/2.0/#/zh-CN/component/uploadelement ui图片上传-实现单图上传_第1张图片

(2) 改造后呈现的效果:

element ui图片上传-实现单图上传_第2张图片

3.改造组件

第一步:改造element ui upload的组件,value的值接收上传回来的图片路径,当value不存在的时候会显示图片上传插件

element ui图片上传-实现单图上传_第3张图片

第二步:当获得图片路径的时候,value有值得时候,显示该图片

element ui图片上传-实现单图上传_第4张图片

第三步:写入dialog图片放大组件

在这里插入图片描述

第四步:注册value到data中

在这里插入图片描述

第五步:在methods调用函数

element ui图片上传-实现单图上传_第5张图片
element ui图片上传-实现单图上传_第6张图片

你可能感兴趣的:(vue,element,ui)