【三】鸡汤来咯开发学习笔记-49

1.上传后显示头像，没有上传就是默认头像
把avatarurl改为定义为一个对象，页面用if和else判断是否存在显示，上传完头像，然后把头像地址保存到数据库
然后一开始加载就会显示上传了的头像
在上传之前就会把临时头像地址先给avatarurl，这样先显示，使得页面更加友好

<image v-if="avatarurl" :src="avatarurl" mode="aspectFill"></image>
                    <image v-else src="../../static/images/defAvatar.png" mode="aspectFill"></image>

js

const avatarurl =ref(userStore.userInfo.avatar);



    function onChooseAvatar(e){
         avatarurl.value=e.detail.avatarUrl;
        
        uniCloud.uploadFile({
            filePath: avatarurl.value,
            cloudPath:`userAvatar/${formatTimestampToYearMonthDay(Date.now())}/${Date.now()}.jpg`,
            cloudPathAsRealPath:true
        }).then(res=>{
            avatarurl.value= res.fileID
            userStore.updateUserInfo({avatar:avatarurl.value})
        })
        
    }

2.图片上传进度创建（这里用处不大，就没弄了）
调用官方方法，然后再图片上面的mask遮罩上面显示就行

3.在self页面也加上判断显示头像（没有用变量，直接原数据量加入）

<view class="avatar">
                    <image v-if="UserStore.userInfo.avatar" :src="UserStore.userInfo.avatar" mode="aspectFill"></image>
                    <image v-else src="../../static/images/defAvatar.png" mode="aspectFill"></image>
                </view>

4.self页面中限制名字长度，避免影响布局，多的用省略号表示，这里又用ai方法tool.js里面，然后进行调用
export function truncateString(str,num){

if(str.length>num){
    return str.substring(0,num) + "...";
}else{
    return str;
}

}

然后调用

<view class="username">{{truncateString(UserStore.userInfo.username,8)}}</view>