根据官方
头像昵称填写
从基础库 2.21.2 开始支持
当小程序需要让用户完善个人资料时,可以通过微信提供的头像昵称填写能力快速完善。
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{avatarUrl}}"></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
data: {
avatarUrl: defaultAvatarUrl,
},
onChooseAvatar(e) {
const { avatarUrl } = e.detail
this.setData({
avatarUrl,
})
}
})
在uniapp中应该是这样
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
style="border: none;margin-top: 1rpx;height: 200rpx;padding-left: 20rpx;padding-right: 20rpx;" plain=true>
<image class="avatar" :src="avatarUrl"></image>
</button>
<view style="width: 100%;height: 1rpx;background-color: #D9D9D9;margin-top: 30rpx;"></view>
<view class="df aic" style="width: 100%;">
<view style="font-size: 30rpx;width: 100rpx;">昵称</view>
<input type="nickname" class="weui-input" placeholder="请输入昵称"
style="margin-top: 1rpx;padding-left: 200rpx;padding-right: 20rpx; border:none;height: 80rpx;" />
</view>
<view style="width: 100%;height: 1rpx;background-color: #D9D9D9;"></view>
data() {
return {
avatarUrl:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
}
},
methods: {
onChooseAvatar(e) {
console.log(e)
this.avatarUrl = e.detail.avatarUrl
},
}
this.avatarUrl = e.detail.avatarUrl 不是this.avatarUrl = e.detail
微信开发者工具返回的是
http://tmp/
真机返回的是 wxfile://tmp,
需要把这个文件上传到自己服务器或者第三方服务器。 因为这个路径随时失效的。
微信官方:
网络 /上传 /wx.uploadFile
UploadTask wx.uploadFile(Object object)
以 Promise 风格 调用:不支持
小程序插件:支持,需要小程序基础库版本不低于 1.9.6
微信 Windows 版:支持
微信 Mac 版:支持
功能描述
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type
为 multipart/form-data
。使用前请注意阅读相关说明
uniapp对应
uni.uploadFile(OBJECT)
将本地资源上传到开发者服务器,客户端发起一个 POST
请求,其中 content-type
为 multipart/form-data
。
如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。另外选择和上传非图像、视频文件参考:https://ask.dcloud.net.cn/article/35547 (opens new window)。