微信小程序圆形头像，好看的小程序圆形头像大全

时间：2023-07-01 14:05 阅读数：108 人阅读分类：知识百科

　　微信小程序圆形头像怎么上传?微信小程序何微信一样，都是有微信头像的哦，那么微信小程序圆形头像怎么上传呢?接下来微微风小编会为大家详细介绍微信小程序圆形头像上传的方法了。

　　微信小程序圆形头像怎么上传?

　　微信小程序圆形头像选择，上传，预览需要用到以下的东西：

　　1. action-sheet 底部弹出可选菜单组件

　　2. wx.uploadFile 将本地资源上传到服务器

　　3. wx.chooseImage 从本地相册选择图片或使用相机拍照。

　　4. wx.previewImage 预览微信图片

　　微信小程序圆形头像效果图如下：

　　wxml微信代码如下：

　　.page__bd{

　　background: url(.itit123/image/meBack.jpg) no-repeat;

　　background-size:cover;

　　}

　　var util = require('../../utils/util.js');

　　var app = getApp();

　　Page({

　　data: {

　　userImg: "../../images/pic_160.png", // 头像图片路径

　　actionSheetHidden: true, // 是否显示底部可选菜单

　　actionSheetItems: [

　　{ bindtap: 'changeImage', txt: '修改头像' },

　　{ bindtap: 'viewImage', txt: '查看头像' }

　　] // 底部可选微信菜单

　　// 初始化加载获取设备长宽

　　onLoad: function (options) {

　　var that = this;

　　wx.getSystemInfo({

　　success: function (res) {

　　that.setData({

　　windowHeight: res.windowHeight,

　　windowWidth: res.windowWidth

　　})

　　}

　　});

　　// 点击头像显示底部菜单

　　clickImage: function () {

　　var that = this;

　　that.setData({

　　actionSheetHidden: !that.data.actionSheetHidden

　　})

　　// 点击其他区域隐藏底部菜单

　　actionSheetbindchange: function () {

　　var that = this;

　　that.setData({

　　actionSheetHidden: !that.data.actionSheetHidden

　　})

　　// 上传头像

　　changeImage: function () {

　　var that = this;

　　wx.chooseImage({

　　count: 1, // 默认9

　　sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

　　sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

　　success: function (res) {

　　// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属*显示图片，只有一张图片获取下标为0

　　var tempFilePaths = res.tempFilePaths[0];

　　that.setData({

　　userImg: tempFilePaths,

　　actionSheetHidden: !that.data.actionSheetHidden

　　})

　　util.uploadFile('/itdragon/uploadImage', tempFilePaths, 'imgFile' ,{}, function (res) {

　　console.log(res);

　　if (null != res) {

　　that.setData({

　　userImg: res

　　})

　　} else {

　　// 显示消息提示框

　　wx.showToast({

　　title: '上传失败',

　　icon: 'error',

　　duration: 2000

　　})

　　}

　　});

　　}

　　})

　　// 查看原图

　　viewImage: function () {

　　var that = this;

　　wx.previewImage({

　　current: '', // 当前显示图片的链接

　　urls: [that.data.userImg] // 需要预览的图片链接列表

　　})

　　}

　　});

　　微信小程序圆形头像怎么上传?以上就是小编整理的微信小程序圆形头像上传的方法了哦，各位亲们如果想为自己的微信小程序设置一个头像，以上内容供大家参考，请多关注微微风。