[渲染层网络层错误] Failed to load local image,http://tmp,小程序头像不显示

根据官方

头像昵称填写

从基础库 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)。