Element UI Upload 组件 设置只允许上传单张图片的操作

原文链接:https://blog.csdn.net/sinat_16463137/article/details/79227564

在原文的基础上做了少量修改。

首先附一个官方upload的地址 http://element-cn.eleme.io/#/zh-CN/component/upload

其中有上传多张和不同样式列表的例子,只是在【用户上传头像】这个例子中,在下并没有成功的使用。

会出现显示不出已上传的图片无法显示缩略图,无法调整缩略图的位置。

所以我不想深究,直接用【照片墙】这个例子往上怼。这个例子上上传多张的,因为之前做过上传多张的项目,所以比较轻车熟路。

先说一下我的思路,大概就是在上传了一张以后将上传组件隐藏(还有更好的思路可以交流),于是我在调试器中找了上传组件的样式 el-upload--picture-card

 

只要在检测到上传列表中已经有一张图片时,就隐藏上传组件,只展示上传列表。

那么就可以给整个上传组件一个class名称,这个class没有任何样式,只是做选择器用。

比如:disabled

那么就在监测到上传一张后,隐藏disabled 下面的 el-upload--picture-card

思路大概就是这样,下面跟demo↓↓↓↓↓↓

话不多说直接上代码:
先定义变量 uploadDisabled='' 


    
  


                    
                    

你可能感兴趣的:(VUE)