参考官方文档:点击跳转
具体实现:
wxml:
html
<button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="avatarUrl"></image>
</button>
js:
javascript
const defaultAvatarUrl =
'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
const avatarUrl = ref(defaultAvatarUrl)
//图片路径容器
const imgInfo = reactive({
imgs: ''
})
// 头像上传事件
const onChooseAvatar = (e) => {
console.log(e);
avatarUrl.value = e.detail.avatarUrl;
console.log(e.detail.avatarUrl);
uni.uploadFile({
url: 'https://xxxx', //仅为示例,非真实的接口地址
filePath: e.detail.avatarUrl,
name: 'file',
formData: {
'user': 'test'
},
success: function(res) {
//剥离接口返回路径
imgInfo.imgs = JSON.parse(res.data)
console.log(imgInfo.imgs.data.url);
}
});
}
之后根据注册需求适当调整即可 (〃 ̄︶ ̄)人( ̄︶ ̄〃)