setting页面点击用户资料跳转到user_info页面,别忘了在pages.json注册新页面
<navigator url="../user_info/user_info">
个人资料
</navigator>
user_info页面对头像做点击事件,点击弹出ActionSheet
<image :src="avatar" class="avatar" @tap="showActionSheet"></image>
js部分的data数据
data() {
return {
nickname: uni.getStorageSync('login_key').nickname,
avatar: uni.getStorageSync('login_key').avatar,
userId: uni.getStorageSync('login_key').userId
};
}
showActionSheet函数
showActionSheet: function() {
var _this = this;
uni.showActionSheet({
itemList: ['拍照', '从相册选择'],
success: function(res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
//选择的是拍照功能
if (res.tapIndex == 0) {
uni.chooseImage({
count: 1,
sourceType: ['camera'],
success: function(res) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePaths[0],
success: function() {
console.log('save success');
uni.uploadFile({
url: 'http://****:8080/api/user/avatar',
filePath: res.tempFilePaths[0],
name: 'file',
formData: {
userId: _this.userId
},
success: uploadFileRes => {
console.log(uploadFileRes.data);
_this.avatar = uploadFileRes.data;
}
});
}
});
}
});
}
//从相册选择
if (res.tapIndex == 1) {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都
sourceType: ['album'], //从相册选择
success: function(res) {
console.log(JSON.stringify(res.tempFilePaths));
uni.uploadFile({
url: 'http://******:8080/api/user/avatar',
filePath: res.tempFilePaths[0],
name: 'file',
formData: {
userId: _this.userId
},
success: uploadFileRes => {
console.log(uploadFileRes.data);
_this.avatar = uploadFileRes.data;
}
});
}
});
}
},
fail: function(res) {
console.log(res.errMsg);
}
});
}
运行结果
- 蓝墨云班课简阅1.0