效果

代码

<el-row type="flex" style="margin-top: 1%;margin-left: 14%;color: #aaaaaa"><el-col :span="16"><el-form-item label="个人头像" prop="adtabDtos" label-width="15%"><div style="width: 40%; display: inline-block; " v-if="imgDisplay && imgDisplay!= ''"><img :src="imgDisplay" alt="" style="margin-left:5%;height:60px;width:60px;border-radius: 50%"></div><div style="width: 40%; display: inline-block; " v-else><img src="/xxxWeb/static/image/headImage.png" alt="" style="margin-left:5%;height:60px;width:60px;border-radius: 50%"></div><div style="width: 60%; display: inline-block;" ><el-upload:action="action":limit="1":before-upload="beforeUpload":headers="uploadHeader":file-list="fileList":show-file-list="false":on-success="handleUploadSuccess":on-exceed="handleExceed" ><span style="margin-left: 40%;" ><el-button type="text">修改头像</el-button></span></el-upload></div></el-form-item></el-col>
</el-row>

handleUploadSuccess: function (res, file) {if (res.code == '401') {this.$message.error(res.message);} else {this.imageUrl = URL.createObjectURL(file.raw);this.fileUrl = res.data.imagePaththis.flag = 'upload'let adtabDtos = {...res.data,operateType: true,}if(!this.ruleForm.adtabDtos || this.ruleForm.adtabDtos == []){this.ruleForm.adtabDtos = [{...adtabDtos}]} api.editHeadImage({data: {...this.ruleForm},success: function (res) {this.getUserDetail();},fail: function (res) {self.$message.error(res.data.msg);}});}},

show-file-list="false"让文件列表消失，不显示上传的图片列表
el-button中设置type=“text”让按钮变成文本样式，隐藏按钮的效果
给两个div设置display: inline-block;"让两个div并排显示
上传图片成功之后直接调editHeadImage()接口修改用户头像

【el-upload实现一个修改头像的功能】相关推荐

android 仿qq修改头像,Qt:小项目仿QQ修改头像界面，技术点记录
最近写了一个修改头像功能的UI,布局参考了QQ目前的修改头像界面.如下图这里主要说明一下两个地方的技术:1.头像图片上层的遮罩层,圆形外部为灰色,内部为全透明:2.上传图片宽高比例可以通过鼠标拖拽移 ...
如何在项目中高效的修改头像
如何在项目中高效的修改头像在大多数的开发过程中,都有编辑个人信息的功能需求,需要能够修改头像.名称.密码等功能,其中较为繁琐的就是修改头像头像的功能. 修改头像的步骤可以分为以下几步: 1.引入组件 ...
仿微信做的一个群组聊天头像的功能
之前做过一个访微信头像的功能,现在贴出代码先在工程里放入对应的头像,然后装入一个数组传入方法里,接着画好xib对应的9宫格头像,里面用到了2个库,大家可以去网上下载 - (void)viewDi ...
java ajax 更改头像_为什么js通过ajax前端修改头像不能立刻生效?
项目中有一个上传头像的功能,每次上传成功后,,数据库里的路径已经更新到了,但是刷新后就变成之前的头像,必需重新登录系统,才能显示修改后的头像.现在要改成,修改后就立刻生效. var photoImg; ...
minio服务器在win10的上传与下载，以及修改头像Minio速看免费本地文件服务器
首先自己配置Minio服务器和客户端请点击官网地址http://www.minio.org.cn 安装完成后自己百度win10安装. 我是用Spring boot 配置首先导入 Minio D ...
我给你们做了一个金钱豹头像助手，虎年祝大家今年暴富
前言最近金钱豹很火,大家开始换头像了嘛,祝大家2022财源滚滚,升职加薪哈~ 我顺着这个流行的方向做了一个换头像的小程序,大家可以自行换成想要的样子,就不会和其他人有同样的头像啦,咱是程序员就要与众 ...
php修改头像怎么做,PHP - 点击更换头像
原理: 操作流程: 首先点击头像图片,弹出选择窗口,选中其中一个则窗口推出头像更换. 效果: 主页面代码: 头像: 子页面代码(弹出窗体页面): 请选择头像: echo ""; } ...
servlet修改用户头像_修改头像总结
1,背景博客停了好久,主要是最近工作太忙了,还有就是身体状况没有以前那么好了,乘着国庆长假的空档,写下这篇一直想写的文章. 运营平台是我主要致力的一个项目,这个项目分为四个大部分,个人中心,充值中心 ...
vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。
github效果在线预览仓库地址: https://github.com/zhongyoucong/vuejs/ vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入 ...

【el-upload实现一个修改头像的功能】

el-upload实现一个修改头像的功能

效果

代码

【el-upload实现一个修改头像的功能】相关推荐

最新文章

热门文章