【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.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()接口修改用户头像