具体需求:登录后缓存微信头像,在调用某接口时,判断数据库中用户是否有头像,若为空,则将微信头像上传至服务器中,后续展示就用数据库中的头像数据。
具体实现:获取缓存的微信头像,调用wx.getImageInfo()得到微信头像路径(这一步是必需步骤),再调用wx.uploadFile()上传微信头像。
代码:
saveUserPhoto(){
var that = this;
let wxPhoto = wx.getStorageSync('avatar')
console.log('开始上传微信头像到后台,微信头像地址:',wxPhoto)
//获取图片信息
wx.getImageInfo({
src: wxPhoto,
success: function (res) {
var params = {
imgPath: res.path
}
//上传图片
network.upload(params,that.getFileInfo);
},
fail: function(srev){
}
});
},
getFileInfo(res){
if(res.fileUrl.state!==0){
wx.showToast({
title: '上传头像失败',
icon: 'none'
})
return
}
console.log('调用upload接口上传成功,头像路径:',res.fileUrl.data.url)
let params = {
photo: res.fileUrl.data.url
}
network.updateUserPhoto(params,this.getPhotoResult,res.fileUrl.data.url);
},
getPhotoResult(res,uploadUrl){
if(res.data.state===0){
wx.setStorageSync('avatar',config.apiList.wxDownload+uploadUrl)
}
console.log('上传微信头像成功')
}
// 上传
function upload(params,cb, obj){
var formDataObj = {}
if(params.hasOwnProperty('zipLevel')){
formDataObj.zipLevel = params.zipLevel
}
wx.uploadFile({
url: config.apiList.wxUpload,
filePath: params.imgPath, //要上传文件资源的路径
name: 'file', //文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容
header: {
"authorization": wx.getStorageSync('token'),
'Content-Type': 'multipart/form-data',
},
//HTTP 请求中其他额外的参数比如 用户id
formData: formDataObj,
success(res) {
var file = {
tempFileUrl: params,
fileUrl: JSON.parse(res.data)
}
typeof cb == 'function' && cb(file, obj)
},
fail: function () {
wx.showToast({
title: '请求失败',
})
}
})
}
遇到的问题:在本机调试时成功,但发布到体验版时没有上传成功。在同事手机试时,偶然发现,当打开调试模式时就可以上传成功了。原来,我本地开发时打开了“不校验合法域名...”。当我关闭不校验合法域名时,就重现了这个问题。并且控制台报错"https://thirdwx.qlogo.cn 不在以下 downloadFile 合法域名列表中",最后在小程序后台的downloadFile合法域名中配置上就可以了。
注意: 在小程序配置合法域名后 ,一定要在开发者工具 - 项目配置中域名信息中刷新一下。