Element UI Upload 组件 设置只允许上传单张图片的操作
2018-02-01 15:04
4387 查看
首先附一个官方upload的地址 http://element-cn.eleme.io/#/zh-CN/component/upload
其中有上传多张和不同样式列表的例子,只是在【用户上传头像】这个例子中,在下并没有成功的使用。
会出现显示不出已上传的图片无法显示缩略图,无法调整缩略图的位置。
所以我不想深究,直接用【照片墙】这个例子往上怼。这个例子上上传多张的,因为之前做过上传多张的项目,所以比较轻车熟路。
先说一下我的思路,大概就是在上传了一张以后将上传组件隐藏(还有更好的思路可以交流),于是我在调试器中找了上传组件的样式
el-upload--picture-card
只要在检测到上传列表中已经有一张图片时,就隐藏上传组件,只展示上传列表。
那么就可以给整个上传组件一个class名称,这个class没有任何样式,只是做选择器用。
比如:disabled
那么就在监测到上传一张后,隐藏disabled 下面的 el-upload--picture-card
思路大概就是这样,下面跟demo↓↓↓↓↓↓
话不多说直接上代码:
js重点部分:
样式就一句:
uploadDiseabled 会根据上传列表的长度动态的给upload的组件添加样式,进而将达到只上传一张的效果。然后这个方法也可以用于限制上传张数。
以上 over~
其中有上传多张和不同样式列表的例子,只是在【用户上传头像】这个例子中,在下并没有成功的使用。
会出现显示不出已上传的图片无法显示缩略图,无法调整缩略图的位置。
所以我不想深究,直接用【照片墙】这个例子往上怼。这个例子上上传多张的,因为之前做过上传多张的项目,所以比较轻车熟路。
先说一下我的思路,大概就是在上传了一张以后将上传组件隐藏(还有更好的思路可以交流),于是我在调试器中找了上传组件的样式
el-upload--picture-card
只要在检测到上传列表中已经有一张图片时,就隐藏上传组件,只展示上传列表。
那么就可以给整个上传组件一个class名称,这个class没有任何样式,只是做选择器用。
比如:disabled
那么就在监测到上传一张后,隐藏disabled 下面的 el-upload--picture-card
思路大概就是这样,下面跟demo↓↓↓↓↓↓
话不多说直接上代码:
<el-upload class="avatar-uploader" :class="{disabled:uploadDisabled}" :action="logoImageUploadUrl" list-type="picture-card" :file-list="imagelist" :headers="headers" name="logoImage" :on-success="handleUploadSuccess" :on-remove="handleRemove" :on-preview="handlePictureCardPreview"> <i class="el-icon-plus"></i> </el-upload>
js重点部分:
computed: { uploadDisabled:function() { return this.imagelist.length >0 }, },
样式就一句:
.disabled .el-upload--picture-card { display: none; }
uploadDiseabled 会根据上传列表的长度动态的给upload的组件添加样式,进而将达到只上传一张的效果。然后这个方法也可以用于限制上传张数。
以上 over~
相关文章推荐
- 七牛云图片上传:使用element-ui的upload组件
- 在vue项目中使用element-ui的Upload上传组件
- 解决使用elementUI框架el-upload上传组件时session丢失问题
- vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
- 阿里OSS Java-SDK带进度条上传,配合前端element-ui upload组件使用示例
- vue2.0 使用element-ui里的upload组件实现图片预览效果
- element UI upload组件上传附件格式限制方法
- 在vue项目中使用element-ui的Upload上传组件的示例
- element-ui upload组件多文件上传
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- 百度ueditor组件上传图片后<img>里的alt设置
- 百度ueditor组件上传图片后如何设置img里的alt属性
- vue elementui el-upload组件 input type=file坑重新选择同一文件时不再显示
- Vue上传文件:ElementUI中的upload实现
- commons fileupload上传组件(完成图片上传)
- MVC文件上传07-使用客户端jQuery-File-Upload插件和服务端Backload组件裁剪上传图片
- element ui上传图片到七牛
- ASP 化境上传组件上传不成功 提示不允许操作
- freemarker+springMVC+ajaxfileupload实现异步图片上传(单张)