el-upload 仅上传一张图片

1.el-upload组件使用

 <el-upload action="#" list-type="picture-card"  :auto-upload="false"  :on-change="handleChange"  :limit='1':on-remove="handleRemove" :file-list="imgFilesList " ><i class="el-icon-plus" ></i>
</el-upload>
<!--
auto-upload  是否在选取文件后立即进行上传
on-change    文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
on-remove    点击删除时的钩子
file-list    供回显的数据
limit        最大上传的个数
-->

通过以上操作可以控制只上传一张图片，但仍会显示

2.上传完将新增按钮隐藏起来

  handleChange:function(file,fileList){let that = this;const isLt2M = file.size / 1024 / 1024 < 2;if (!isLt2M) {that.imgFilesList = [];this.$message.error('上传头像图片大小不能超过 2MB!');return   isLt2M;}else{that.fileList = fileList;}// 当上传图片成功时，即隐藏上传按钮if(fileList.length > 0){$('.el-upload').css('display','none');}},

3.点击删除将新增按钮显示

handleRemove(file, fileList) {this.fileList = []if(fileList.length == 0){$('.el-upload').css('display','inline-block');}
}

4.会出现的问题

如果是在el-dialog中的弹框由于dialog是懒渲染机制导致无法选中元素问题

解决方案

//  点击显示弹框dialogFun:function(index){let that = this;// that.List[index].logoFile 为回显数据中地址是否为空if(that.List[index].logoFile != null){// el-upload的回显方式that.imgFilesList.push({name:'',url:that.List[index].logoFile});setTimeout(function(){  //解决dialog弹窗第一次懒渲染 无法选中元素问题$('.el-upload').css('display','none');},0);}else{$('.el-upload').css('display','inline-block');}},

el-upload 仅上传一张图片相关推荐

使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...
高手教你PHP上传多张图片
高手教你PHP上传多张图片对于我们来说上传一张图片是非常简单的事情,这里教大家一个关于PHP上传多张图片的代码分析,希望对大家有帮助. 学习PHP时,你可能会遇到PHP上传多张图片问题,这里将介绍P ...
okhttp上传图片和其他参数_Android中Okhttp3实现上传多张图片同时传递参数_放手_前端开发者...
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片. 最近做项目,打算换个方法上传图片. Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片. ...
Nginx Upload Module 上传模块
传统站点在处理文件上传请求时,普遍使用后端编程语言处理,如:Java.PHP.Python.Ruby等.今天给大家介绍Nginx的一个模块,Upload Module上传模块,此模块的原理是先把用户上 ...
微信小程序-上传多张图片加进度，持续修正中……
tips.参考网上资料的改进版 1.怎么使用.html <up-picurl="{{u ...
antd Upload手动上传(react)
情况介绍在antd官方提供的upload组件案例中,都使用了action属性直接上传,唯一手动上传的一个例子(如下图)也不够好用,可能不能满足项目的需求,所以我们需要对其进行一些修改,并加入一些别的 ...
vue实现星级评价及上传多张图片等功能（类似淘宝商品评价页面）
最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示: 评价页点击看大图,且可左右滑动功能需求分析默认为5颗星,为非常满意,4颗满意 ...
elementui展示多张图片_elementUI 上传多张图片并预览大图左右切换
前段时间项目需求中涉及到上传多张图片当条信息查看时可预览大图功能,项目框架vue.js+elementUI,抽时间在此做个整理记录,如有更好的方法欢迎大家互相交流页面列表更多操作-修改-先选择图 ...
VUE+ELEMENTUI el-upload照片墙手动上传多张图片保存和修改功能前后端完整实现
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. VUE+ELEMENTUI el-upload照片墙手动上传多张图片保存和修改功能前后端完整 ...

el-upload 仅上传一张图片

el-upload 仅上传一张图片

1.el-upload组件使用

2.上传完将新增按钮隐藏起来

3.点击删除将新增按钮显示

4.会出现的问题

解决方案

el-upload 仅上传一张图片相关推荐

最新文章

热门文章