【微信小程序】上传头像

效果

代码

editInfo.js

// pages/editInfo/editInfo.jsPage({/*** 页面的初始数据*/data: {dataList: []},/*** 获得图片本地路径*/chooseWxImage: function () {const that = this;wx.chooseImage({// 最多可以选择的图片张数count: 1,// 所选的图片的尺寸sizeType: ['original', 'compressed'],// 选择图片的来源sourceType: ['album', 'camera'],success: function (res) {wx.showToast({title: '正在上传...',icon: 'loading',mask: true,duration: 10000});console.log(res);console.log(res.tempFilePaths[0]);that.upImgs(res.tempFilePaths[0], 0); // 调用上传方法},fail: function (res) {console.log('fail', res);},complete: function (res) {}});},/*** 上传服务器* @param {*} imgurl* @param {*} index*/upImgs: function (imgurl, index) {const that = this;wx.uploadFile({url: `http://api`,// 小程序本地的路径filePath: imgurl,// 后台获取我们图片的keyname: 'file',header: {'content-type': 'multipart/form-data'},// 额外的参数formDataformData: {},success: function (res) {const datas = JSON.parse(res.data);console.log(datas);if (datas.code === 1) {wx.setStorageSync('PROFILEURL', 'http://' + datas.data);const profileUrl = wx.getStorageSync('PROFILEURL');that.setData({profileUrl: profileUrl});wx.showToast({title: '头像上传成功',icon: 'success',duration: 2000,mask: true,success: res => {}});console.log('success', res); // 接口返回网络路径} else {wx.showModal({title: '错误提示',content: datas.message,showCancel: false,success: function (res) { }});console.log('fail', datas.message);}},fail: function (res) {console.log('fail', res);wx.hideToast();wx.showModal({title: '错误提示',content: '上传图片失败',showCancel: false,success: function (res) { }});}});},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
});

profile.js

// pages/profile/profile.js// 获取本地缓存
const USERID = wx.getStorageSync('USERID');
const ROLEID = wx.getStorageSync('ROLEID');
const PROFILEURL = wx.getStorageSync('PROFILEURL');
const NICKNAME = wx.getStorageSync('NICKNAME');
const POSTNUM = wx.getStorageSync('POSTNUM');
const FANSNUM = wx.getStorageSync('FANSNUM');
const INTRODUCE = wx.getStorageSync('INTRODUCE');
const TAGLIST = wx.getStorageSync('TAGLIST');Page({/*** 页面的初始数据*/data: {UserInfo: [{profileUrl: PROFILEURL,nickname: NICKNAME,postNum: POSTNUM,fansNum: FANSNUM,introduce: INTRODUCE,tagList: TAGLIST}],pageNum: 1,userPageSize: 4,personalId: USERID,userId: USERID,onRefresh: false,roleId: ROLEID},/*** 刷新普通用户信息* @param {*} event*/updateUserInfo: function () {// 获取本地缓存const PROFILEURL = wx.getStorageSync('PROFILEURL');const NICKNAME = wx.getStorageSync('NICKNAME');const POSTNUM = wx.getStorageSync('POSTNUM');const FANSNUM = wx.getStorageSync('FANSNUM');const INTRODUCE = wx.getStorageSync('INTRODUCE');const TAGLIST = wx.getStorageSync('TAGLIST');// 更新缓存const that = this;for (let i = 0; i < that.data.UserInfo.length; i++) {// console.log(that.data.UserInfo.length);const profileUrl = 'UserInfo[' + i + '].profileUrl';const nickname = 'UserInfo[' + i + '].nickname';const postNum = 'UserInfo[' + i + '].postNum';const fansNum = 'UserInfo[' + i + '].fansNum';const introduce = 'UserInfo[' + i + '].introduce';const tagList = 'UserInfo[' + i + '].tagList';that.setData({[profileUrl]: PROFILEURL,[nickname]: NICKNAME,[postNum]: POSTNUM,[fansNum]: FANSNUM,[introduce]: INTRODUCE,[tagList]: TAGLIST});}// console.log(that.data.UserInfo[0].profileUrl);},/*** 跳转编辑资料界面*/gotoEditInfo: function (event) {// 当前要跳转到另一个界面，但是会保留现有界面wx.navigateTo({url: `../editInfo/editInfo?${this.data.dataList}`});},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {const that = this;if (USERID === 0) {wx.redirectTo({ url: 'pages/login/login' });}},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {// 每次回到这个页面都要更新缓存const that = this;if (ROLEID === 1) {that.updateUserInfo();} else {wx.showToast({title: '用户未登录！', // 提示的内容,icon: 'none', // 图标,duration: 2000, // 延迟时间,mask: true, // 显示透明蒙层，防止触摸穿透,success: res => {}});console.log('用户未登录！');}},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
});

【微信小程序】上传头像相关推荐

微信小程序上传头像和昵称持久化保存
微信小程序上传头像和昵称持久化保存 1. 持久化步骤因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url.所以非常有必要把这个url ...
微信小程序上传头像先裁剪图片后上传
我是使用we-cropper.js插件实现的,下面是实现过程: 文件结构插件we-cropper.js /*** we-cropper v1.2.0* (c) 2018 dlhandsome* @l ...
微信小程序 - 上传头像
// 上传文件 function uploadFile(url, filePath, name, formData, cb) { wx.uploadFile({ url: 'https://www.l ...
小程序 php转excel,做微信小程序上传数据数据格式？-微信上传数据生成excle
做微信小程序上传数据数据格式? 建议找人专门制作设计好,专业的事情交给专业的人做,自己浪费时间还不一定能搞好如何把微信里的excel传到qq上 1.在手机中先箭头所示的"微信" ...
微信小程序上传文件到阿里OSS教程
前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名上传文件访问域名这里我们要在小程序后台配置上传域名(上面的域名是我 ...
微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
微信小程序上传文件到自己的服务器
微信小程序上传文件到自己的服务器 1.建立 WebApi项目 (1)创建项目 (2)发布项目 2.后端接口代码 3.小程序端调接口 1.建立 WebApi项目 (1)创建项目选择菜单 "文 ...
微信小程序上传阿里云视频文件流程及代码
为了微信小程序客服端实现自拍视频能够分享给多个好友,我们需要把小程序自拍的视频存储到服务器,而阿里云在性能和速度上比较不错,所以我们选择了阿里云作服务器. 第一步.微信小程序项目创建 1. 到http ...
微信小程序上传后进行性手机扫码阅览发现白屏的解决
目录问题: 微信小程序上传后进行性手机扫码阅览发现白屏的解决 1.上传时没有勾选保护 2.请求的域名没有配置问题: 微信小程序上传后进行性手机扫码阅览发现白屏的解决 1.上传时没有勾选保护 ...
微信小程序上传组件（可同时长传图片+视频）
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...

【微信小程序】上传头像

效果

代码

editInfo.js

profile.js

【微信小程序】上传头像相关推荐

最新文章

热门文章