效果
代码
<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.imagePath
this.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()
接口修改用户头像