微信小程序获取头像的问题
微信小程序获取用户权限被收回（需要使用头像昵称填写）
当小程序需要让用户完善个人资料时，可以通过微信提供的头像昵称填写能力快速完善。
根据相关法律法规，为确保信息安全，由用户上传的图片、昵称等信息微信侧将进行安全检测，组件从基础库2.24.4版本起，已接入内容安全服务端接口（mediaCheckAsync、msgSecCheck），以减少内容安全风险对开发者的影响。
在开发者工具上，input 组件是用 web 组件模拟的，因此部分情况下并不能很好的还原真机的表现，建议开发者在使用到原生组件时尽量在真机上进行调试
1.chooseAvatar 获取头像报错？
报错内容为:
chooseAvatar:fail Cannot read property 'initScl' of undefined(env: Windows,mp,1.06.2209190; lib: 2.29.2)
此为微信开发者工具基础库 的问题
将调式基础库设置为2.30.2 即可
2.button组件chooseAvatar获取微信头像时，从相册选取图片后报错？
底部下拉框中国呢选择从相册选取照片，照片过大或者使用webp的图片，会直接报错
并且微信官方并没有给对应的回调,同时没有触发onChooseAvatar 事件
图片最终会上传至微信官方,会用于鉴😶?或者其他功能,如果想要在微信小程序中使用获取微信头像功能,就不得不遵守他的规矩了
最终会获取到一个由官方处理好的头像地址,通过uni.uploadFile 进行处理,或者转换为base64进行处理文章来源：https://www.toymoban.com/news/detail-601772.html
文章来源地址https://www.toymoban.com/news/detail-601772.html
<template>
<view style="padding: 100upx 50upx;">
<view class="avatarBox">
<button style="background: transparent;" class="avatarBox" open-type="chooseAvatar"
@chooseavatar="onChooseAvatar">
<image mode="aspectFill" class="avatar" :src="avatarUrl"></image>
</button>
</view>
<view class="nameBox">
<view class="namePrev">昵称</view> <input type="nickname" class="weui-input" v-model="name"
placeholder="请输入昵称" />
</view>
<view class="btnBox"><tui-button class="login-btn" type="primary" @click="confrim"> 确定 </tui-button></view>
</view>
</template>
<script>
export default {
data() {
return {
// 用户头像
avatarUrl: require('../../static/images/public/logo2.png'),
// 用户姓名
name: '',
serverUrl: this.Weliam.apiServer() + '/images/upload',
}
},
methods: {
// 上传图片,拿到url后 存入数据库
uploadImage: function(url) {
console.log(url);
let _this = this;
uni.uploadFile({
url: this.serverUrl,
name: "file",
header: {},
formData: {
// 这里按需求填
school_id: _this.Weliam.getSchoolId()
},
filePath: url,
success: function(res) {
console.log(res);
_this.avatarUrl = JSON.parse(res.data).url
console.log(_this.avatarUrl);
},
fail: function(res) {
console.log(res);
uni.showToast({
title: '图片上传失败!',
icon: 'error',
duration: 1000
})
}
})
},
// 点击确定弹窗
confrim() {
uni.showModal({
title: '确定弹窗',
content: '确定修改个人资料？',
success: (res) => {
if (res.confirm) {
let data = {}
// 业务
} else if (res.cancel) {
// console.log('用户点击取消');
}
}
});
},
async onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
// console.log(e);
// this.avatarUrl = avatarUrl
this.uploadImage(avatarUrl)
}
}
}
</script>
<style lang="scss" scoped>
.btnBox {
position: absolute;
width: 80%;
bottom: 100upx;
left: 50%;
transform: translateX(-50%);
}
.login-btn {}
.avatarBox {
width: 150upx;
height: 150upx;
display: flex;
margin: 0upx auto;
margin-bottom: 100upx;
button {
padding: 0;
}
image {
width: 100%;
height: 100%;
}
}
.nameBox {
display: flex;
font-size: 32upx;
align-items: center;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 18upx 0;
width: 100%;
.namePrev {
font-size: 34upx;
font-weight: 600;
margin-right: 100upx;
}
}
</style>到了这里，关于微信小程序获取头像的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
