小程序实现点击头像上传图片以及昵称输入修改

---

<!--  头像   --> 

<button class="chooseImg" @chooseavatar="onChooseAvatar" open-type="chooseAvatar" >

        <image class="hAvatar" :src="avtar" lazy-load="true" /> 

</button>

onChooseAvatar(e) {

        const that = this;

        const tempFilePath = e.detail.avatarUrl;

        const id = this.consumerId + '';

        wx.getFileSystemManager().saveFile({ 

                 tempFilePath: tempFilePath,

                success: function(savedFile) {

                        //自行定义上传服务器

                }

         });

},

  //自行定义大小，样式根据自己需求来

.chooseImg {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #eeeeee;
        padding: 0;
        margin: 2% auto;
        border: none;

        .hAvatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

 <!--  昵称是否显示：定义好showName   -->

<view v-if="!ifUpdateName" class="u_name">

        <!--  昵称是否显示：定义好showName   -->        

        <view class="u_title" @click="handleName">用户名:

                <span v-show="showName == true">{{ name }}</span> 

                <span v-show="showName == false">******</span>

        </view>

          <!--  点击是否显示：需要自行下载图片：browseImg，hideImg   -->        

        <view class="u_icon" v-show="showName == true" @click="nameClick">

                <image style="width: 100%;height: 100%;" :src="browseImg" mode="aspectFill"                         lazy-load="true" />

        </view>

        <view class="u_icon" v-show="showName == false" @click="nameClick">

                <image style="width: 100%;height: 100%;" :src="hideImg" mode="aspectFill"                         lazy-load="true" />

        </view>

 </view> 

<!--  点击昵称，变成输入框：ifUpdateName，nameUpValue需自行定义   -->

 <view class="nameView" v-if="ifUpdateName">

        <input class="upNameInput" type="text" v-model="nameUpValue" focus                 @blur="updataUserName(nameUpValue)" />
</view>

<!--  样式根据自己需求来   -->

.u_name {
        position: relative;
        height: 30px;
        margin: 3% 0;

        .u_title {
            position: absolute;
            left: 6%;
            width: 50%;
            height: 100%;
            line-height: 30px;
            font-size: 15px;
            font-weight: 600;
            text-align: right;
            vertical-align: middle;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .u_icon {
            position: absolute;
            top: 0;
            left: 60%;
            width: 7%;
            height: 100%;
        }
    }

.nameView {
        position: relative;

        .upNameInput {
            background-color: #eee;
            height: 30px;
            line-height: 30px;
            width: 80%;
            margin: auto;
            border: 1px solid #ccc;
            border-radius: 20px;
        }

        .upNameInput::before {
            content: "用户名: ";
            position: absolute;
            line-height: 30px;
            left: 15%;
        }

    }