ElementUI实现el-upload单图上传

头像上传

上传图片的时候遇到该上传的图片应该是单图上传的，比如头像。如果想要上传一张图片之后就不让上传了，这时候应该咋办？

单图上传的两种解决方法

为啥是两种，因为我目前只会两种。。。

第一种：

<el-upload action="#":class="{disabled:uploadDisabled}"list-type="picture-card" :http-request="httpRequest":on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload" :on-remove="handleRemove":on-change="handleChange" :file-list="imglist"><i class="el-icon-plus"></i>
</el-upload>

computed: { uploadDisabled:function() {return this.imglist.length>0;},
}

如果要隐藏上传的框则设置style为：

（如果是向我一样<style lang="less" scoped>的话一定记得加/deep/，不然效果出不来。）

<style lang="less" scoped>
/deep/ .disabled{.el-upload--picture-card{display: none;}}
</style>

第二种：

<el-form-item label="头像" prop="userpic">
<el-upload action="#":class="{disabled:uploadDisabled}":limit="1"list-type="picture-card" :http-request="httpRequest":on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload" :on-remove="handleRemove":on-change="handleChange" :file-list="imglist"><i class="el-icon-plus"></i>
</el-upload>
</el-form-item>

computed: {uploadDisabled:function() {//this.ruleForm.userpic为表单prop的数据return this.ruleForm.userpic !='';},
},

如果要隐藏的话，同上设置css代码~

ElementUI实现el-upload单图上传相关推荐

使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...
使用elementui实现表单上传功能_使用ElementUI中的upload组件上传Excel文件
最初使用该组件实现图片上传是没有问题的,前后端配合,最终实现想要的效果,组件使用过代码如下: 将文件拖到此处,或点击上传现在改为使用该组件实现Excel文件上传,组件的使用几乎是不变的,代码如下: ...
NodeJ+Express+Vue+ElementUI+multer 实现upload文件上传（纯JS开发后台功能），记住不是java的哦
本帖子用于本人开发过程中,开心了想记录的一些知识点,转载请附上原文链接 ^V^ 啾咪啾咪 1. .vue 页面的代码,什么引入啥啥的略过喏 template里的代码块 <el-form-item ...
关于element-ui的upload文件上传组件的使用技巧总结
关于element-ui的upload文件上传组件的技巧总结简单说几点: uploader组件使用中的几个常见问题和解答 upload文件类型.大小的筛选: 多文件上传的配置: 3.文件列表的相关操 ...
element-ui upload组件上传文件类型限制
element-ui upload组件上传文件类型限制 <el-uploadclass="c-upload"ref="upload":action=&q ...
uniapp、uview——图片上传（单图上传、多图上传、多组照片上传、图片回显）
一.简介 uView组件的上传功能,单图上传.多图上传等. 官方文档地址: https://www.uviewui.com/components/upload.html 二.步骤 (一)单图上传 1. ...
element ui图片上传-实现单图上传
1. 业务需求: 需要把多图上传的效果改造成为单图上传的效果 2. 效果展示 (1) 原来官网效果: https://element.eleme.cn/2.0/#/zh-CN/component/up ...
fileupload的回调方法_jQuery File Upload文件上传插件使用详解
本篇教程介绍了jQuery File Upload文件上传插件使用详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < jQuery File Upload 是一个 ...
ueditor单图上传iframe跨域_UEditor单图上传（simpleupload）跨域问题解决方案
代码实现首先我们需要在ueditor.all.js文件中找到原本的单图上传部分的代码搜索关键字 simpleupload,如下图所示: 然后找到上传图片的代码片段,如下图所示: 然后把 domUt ...

ElementUI实现el-upload单图上传

头像上传

单图上传的两种解决方法

ElementUI实现el-upload单图上传相关推荐

最新文章

热门文章