修改小程序的头像通常涉及以下几个步骤:
选择图片
使用微信小程序提供的API `wx.chooseImage` 来允许用户从本地相册或相机选择一张图片。
上传图片
选择图片后,需要将图片上传到服务器。这可以通过 `wx.uploadFile` API 实现。
更新头像
上传成功后,将图片的URL更新到小程序中用户的头像信息里。这通常涉及到修改小程序的本地数据或全局数据,并将新的头像URL设置为用户的显示头像。
```javascript
// index.ts
Page({
data: {
avatarUrl: '' // 初始头像URL
},
changeAvatar() {
const that = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
const tempFilePath = res.tempFilePaths;
console.log(tempFilePath, res);
wx.uploadFile({
url: 'http://192.168.188.226:22000/ech-sad/v1/upload/img', // 上传图片的服务器地址
filePath: tempFilePath,
name: 'imagefile',
header: {
Authorization: wx.getStorageSync("Authorization") // 设置请求头,携带上token
},
formData: {
// 其他表单数据
},
success(uploadRes) {
const data = JSON.parse(uploadRes.data);
const newAvatarUrl = data.url; // 假设服务器返回的数据中包含新的头像URL
that.setData({
avatarUrl: newAvatarUrl
});
},
fail() {
wx.showToast({
title: '上传失败',
icon: 'none'
});
}
});
}
});
}
});
```
在WXML文件中,你可以这样绑定头像:
```xml
```
在WXSS文件中,你可以这样设置头像的样式:
```css
/* index.wxss */
.avatar-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.avatar {
width: 150rpx;
height: 150rpx;
border-radius: 50%;
}
```
确保你的服务器端有相应的接口来处理图片上传和头像信息的更新。如果你使用的是微信提供的默认头像服务,可能还需要遵循微信的特定流程和限制。