admin管理员组

文章数量:1026989

【el

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

• 效果
• 代码

效果

代码

<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

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

• 效果
• 代码

效果

代码

<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