微信小程序--注册时获取微信头像

参考官方文档:点击跳转

具体实现:

wxml:

<button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
    <image class="avatar" :src="avatarUrl"></image>
</button>

js:

const defaultAvatarUrl =
'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
const avatarUrl = ref(defaultAvatarUrl)
//图片路径容器
const imgInfo = reactive({
		imgs: ''
	})

// 头像上传事件
	const onChooseAvatar = (e) => {
		console.log(e);
		avatarUrl.value = e.detail.avatarUrl;
		console.log(e.detail.avatarUrl);
		uni.uploadFile({
			url: 'https://xxxx', //仅为示例,非真实的接口地址
			filePath: e.detail.avatarUrl,
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: function(res) {
                   //剥离接口返回路径
				imgInfo.imgs = JSON.parse(res.data)
				console.log(imgInfo.imgs.data.url);
			}
		});
	}

之后根据注册需求适当调整即可  (〃 ̄︶ ̄)人( ̄︶ ̄〃)

相关推荐

  1. 程序--注册获取头像

    2024-03-10 19:26:04       22 阅读
  2. 程序自定义头部

    2024-03-10 19:26:04       8 阅读
  3. 程序获取经纬度

    2024-03-10 19:26:04       9 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-10 19:26:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-10 19:26:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-10 19:26:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-10 19:26:04       18 阅读

热门阅读

  1. leetcode刷题笔记 split() 分割字符串

    2024-03-10 19:26:04       19 阅读
  2. 使用XML方式配置IOC

    2024-03-10 19:26:04       23 阅读
  3. CGAL 5.6.1 - Modular Arithmetic(模板化算法)

    2024-03-10 19:26:04       20 阅读
  4. 数据结构-滑动窗口

    2024-03-10 19:26:04       22 阅读
  5. 如何解决Ubuntu系统域名解析失败的问题

    2024-03-10 19:26:04       20 阅读
  6. Spring框架中用于处理请求参数的注解

    2024-03-10 19:26:04       20 阅读
  7. react父组件调用子组件的方法

    2024-03-10 19:26:04       21 阅读
  8. spring boot对外部文件的访问

    2024-03-10 19:26:04       18 阅读