在使用chooseAvatar这个组件获取微信头像的时候,在微信开发者工具里面是没有问题的,包括重新选择头像上传,因为在开发者工具里面获取到的微信头像url和文件的url都是http开头的,但是在真机调试的时候,获取到的url是wxfile开头的:
获取到的头像信息: {"avatarUrl": "wxfile://tmp_f8597eda90656b2d70401c6fdb8a06ec.jpg"}
这个时候你去使用downloadFile下载的时候,会报错:
downloadFile:fail url scheme is invalid
这个时候应该是你使用了downloadFile去下载这个url导致的,因为downloadFile只可以下载https域名列表里面的内容,但是你却要来下载wxfill://tmp协议的内容,那是不允许的,但是你又需要这个文件,怎么办呢?
解决办法:
直接使用uploadFile上传,然后filePath填写这个url即可,就可以将文件上传到你的服务器了
完整的代码:
<!-- 获取用户头像 -->
<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="getAvatar">
<u-avatar @click="handleAva" class="avatar" size="80" :src="userStore.userAvatar"></u-avatar>
</button>
const getAvatar = (e) => {
console.log(e.detail);
let avatarUrl = e.detail.avatarUrl;
console.log("头像变化", avatarUrl);
wx.uploadFile({
url: baseURL + `/wechat/wechtupload`,
filePath: avatarUrl,
name: 'file',
formData: {
'uuid': userStore.userId
},
success(res) {
const data = JSON.parse(res.data)
console.log('upload success', data);
// userStore.setAvatar(data.data.src)
userStore.setUser("userAvatar", data.data.src)
userApi.uploadAvatar({
uuid: userStore.userId,
headcurl: data.data.src,
}).then(upRes => {
console.log('更新头像', upRes);
})
},
fail(res) {
console.log('upload fail', res);
}
})
}
还有一种情况,如果你真的下载的是https协议的地址:
这个时候如果你看到你请求的URL是不是https开头的,如果是https开头的,那么应该是你没有将这个域名添加到小程序后台的允许域名列表里面,记得将上传和下载还有request域名列表都填写上: