var app = getApp();
Component({
properties: {
showpop: {
type: Boolean,
value: false
},
avatarUrl: {
type: String,
value: ''
},
nickname: {
type: String,
value: ''
}
},
attached: function () {
},
data: {
},
methods: {
close: function () {
this.triggerEvent("cancel");
},
/**
* 更改头像
*/
onChooseAvatar(e) {
var that = this;
const { avatarUrl } = e.detail
that.setData({
avatarUrl,
})
wx.showLoading({
title: '上传头像到服务器',
})
wx.uploadFile({
url: "后端上传图片的接口地址",
filePath: avatarUrl,
name: 'upfile',
formData: {
'name': avatarUrl
},
header: {
'content-type': 'multipart/form-data'
},
success: function (res) {
wx.hideLoading();
var data = JSON.parse(res.data);
//后端返回图片的访问链接
const { imageUrl } = data;
//保存头像图片远程服务器路径
that.setData({
avatarUrl:imageUrl,
})
}
})
},
onSave(e){
var that = this;
let nickname = e.detail.value.nickname.trim()
if(nickname==null || nickname==""){
wx.showToast({
title:"昵称不能为空",
icon: 'error',
duration: 2000
})
return;
}
that.setData({
nickname,
})
console.log("头像："+that.data.avatarUrl);
console.log("昵称："+that.data.nickname);
//保存头像和昵称到数据库中
app.util.request({
url: 'entry/wxapp/user',
data: {
controller: '后端保存头像和昵称的接口地址',
nickName: that.data.nickname,
avatarUrl: that.data.avatarUrl
},
dataType: 'json',
success: function(res) {
if(res.data.code==0) {
that.setData({
showpop : false
})
wx.showToast({
title: "保存成功",
icon: "success",
duration: 2000
});
}
}
})
}
}
});
微信小程序头像和昵称填写示例
需积分: 0 100 浏览量
2022-11-20
16:42:17
上传
评论 2
收藏 18KB ZIP 举报
微信小程序头像和昵称填写.zip （12个子文件） 
微信小程序头像和昵称填写 images 
bg.png 12KB 个人中心 
me.wxml 212B me.js 475B me.json 153B components avatar-and-nickname index.js 2KB index.json 83B index.wxss 1KB index.wxml 693B modal index.js 977B index.json 23B index.wxss 1KB index.wxml 307B资源评论
