微信小程序实现上传头像至云存储

微信小程序实现上传头像至云存储

1、效果

2、代码

<view><view class="user-upload" bindtap="uploadImg"><image class="user-head " src="{{headUrl}}" mode="aspectFill"></image><text>头像</text></view>
</view>

// pages/user/userinfo.js
Page({/*** 页面的初始数据*/data: {headUrl:"/images/head.png",},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},
//上传头像uploadImg() {// 让用户选择一张图片wx.chooseImage({count: 1,success: chooseResult => {// 将图片上传至云存储空间wx.cloud.uploadFile({// 指定上传到的云路径cloudPath: 'A' + Math.random() + '.jpg',// 指定要上传的文件的小程序临时文件路径filePath: chooseResult.tempFilePaths[0],}).then(res => {console.log('上传成功', res);this.setData({headUrl: res.fileID});}).catch((e) => {console.log(e);});},});},})

.user-upload {display: flex;align-items: center;justify-content: center;flex-direction: column;
}
.user-head{height: 300rpx;width: 200rpx;
}

3、上传完头像后查看存储的图片