参考官方文档:点击跳转
具体实现:
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);
- }
- });
- }
之后根据注册需求适当调整即可 (〃 ̄︶ ̄)人( ̄︶ ̄〃)