小程序更换头像功能

最新推荐文章于 2024-06-04 17:36:25 发布

Mr.冬冬

最新推荐文章于 2024-06-04 17:36:25 发布

阅读量6.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_42307129/article/details/87633173

微信小程序专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了在微信小程序中实现用户更换头像功能的具体步骤。从选择图片到上传服务器，再到保存图片路径，提供了完整的代码示例，帮助开发者快速掌握微信小程序头像更新流程。

	//通过事件执行更换头像方法比如点击头像执行该方法
	updatahead(){
		var that = this;
		wx.chooseImage({
			count: 1, // 默认9
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success: function (res) {
				// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
				var imgPaths = res.tempFilePaths
				that.updataheadservice(imgPaths[0]);
			}
		})
	},
	//上传图片
	updataheadservice(imgPaths){
		var that = this;
		wx.uploadFile({
			url: 'https://example.weixin.qq.com/upload', //你的服务器地址
			filePath: imgPaths, //要上传文件资源的路径
			name: 'headimg', //文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
			formData: {
				adminid: app.globalData.adminid  //HTTP 请求中其他额外的参数比如 用户id
			},
			success(res) {
				console.log(res)
				that.preservationheadimg(res.img);//回调成功调用保存图片接口
			}
		})
	},
	//保存图片
	preservationheadimg(){
		wx.request({
			url: '',//你的接口
			data: {
				userid:123456,
			},
			success: function(res) {
				console.log(res)
			},
		})
	},