阅读模式 收藏

精华

实现上传头像功能——微信小程序

  • • 发表于 8年前
  • • 作者 刘冰华
  • • 11739 人浏览
  • • 14 条评论
  • • 最后编辑时间 8年前
  • • 来自 [技 术]

原创声明:本文为作者原创，未经允许不得转载，经授权转载需注明作者和出处

作者原创，转载请注明出处

作者：刘冰华
2016-12-8 13：30

惯例先看成品

点击弹出选择本地或是拍照，选完后上传到服务器，本地缓存更新

最重要的还是看代码：

.wxml 

<view class="panel__table__view">

  <view class="panel__table__view__cell firstchild cell_access autoheight" catchtap="changeAvatar">
      <view class="panel__table__cell__hd">
        更改头像
      </view>
      <view class="panel__table__cell__bd">
        <view class="person__top__avatar">
          <image src="{{myInfo.wx_avatarurl}}" />
        </view>
      </view>
      <view class="panel__table__cell__ft">
      </view>

  </view>
  <view class="panel__table__view__cell cell_access">
    <navigator url="changeusername">
      <view class="panel__table__cell__hd">
        名字
      </view>
      <view class="panel__table__cell__bd justify">
        {{myInfo.wx_nickname}}
      </view>
      <view class="panel__table__cell__ft">
      </view>
    </navigator>
  </view>
  <view class="panel__table__view__cell">

      <view class="panel__table__cell__hd">
        用户名
      </view>
      <view class="panel__table__cell__bd justify">
        {{myInfo.user_id}}
      </view>
      <view class="panel__table__cell__ft">
      </view>

  </view>
  <view class="panel__table__view__cell cell_access">
    <navigator url="index">
      <view class="panel__table__cell__hd">
        我的二维码
      </view>
      <view class="panel__table__cell__bd">
        <image class="qrcode__40" src="/image/icon/qrcode_40.jpg" />
      </view>
      <view class="panel__table__cell__ft">
      </view>
    </navigator>
  </view>
  <view class="panel__table__view__cell cell_access">
    <navigator url="index">
      <view class="panel__table__cell__hd">
        我的地址
      </view>
      <view class="panel__table__cell__bd justify">

      </view>
      <view class="panel__table__cell__ft">
      </view>
    </navigator>
  </view>
</view>
<view class="panel__table__view">
   <view class="panel__table__view__cell cell_access">
    <navigator url="changesex">
      <view class="panel__table__cell__hd">
        性别
      </view>
      <view class="panel__table__cell__bd">
        {{myInfo.wx_gender == 1 ? '男' : '女'}}
      </view>
      <view class="panel__table__cell__ft">
      </view>
    </navigator>
  </view>
   <view class="panel__table__view__cell cell_access">
    <navigator url="changearea">
      <view class="panel__table__cell__hd">
        地区
      </view>
      <view class="panel__table__cell__bd justify">
        {{myInfo.wx_province+' '+myInfo.wx_city}}
      </view>
      <view class="panel__table__cell__ft">
      </view>
    </navigator>
  </view>
   <view class="panel__table__view__cell cell_access">
    <navigator url="changesign">
      <view class="panel__table__cell__hd">
        个性签名
      </view>
      <view class="panel__table__cell__bd justify">
        {{myInfo.single_sign}}
      </view>
      <view class="panel__table__cell__ft">
      </view>
    </navigator>
  </view>
</view>

.js

Page({
     data : {
        myInfo : {},
        isChatTop : false,//是否置顶聊天
        silence : true //是否消息免打扰
    },
    onLoad : function(){
        var app = getApp().globalData;
        this.commonFunction = app.commonFunction;
        this.commonFunction.getUserInfo.call(this);
        this.setData({
            myInfo : this.data.myInfo,
            API_URL : app.API_URL
        })
    },
    onShow : function(){
        this.commonFunction.getUserInfo.call(this);
        this.setData({
            myInfo : this.data.myInfo
        });
        console.log(this.data.myInfo.wx_nickname)
    },
    changeAvatar : function(){
        var that = this;
        wx.chooseImage({
          count: 1, // 最多可以选择的图片张数，默认9
          sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
          sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
          success: function(res){
              wx.uploadFile({
                url:that.data.API_URL +'uploadavatarurl',
                filePath:res.tempFilePaths[0],
                name:'avatar',
                // header: {}, // 设置请求的 header
                formData: {user_id:that.data.myInfo.user_id}, // HTTP 请求中其他额外的 form data
                success: function(info){
                    console.log(info);
                    that.setData({
                        'myInfo.wx_avatarurl' : res.tempFilePaths[0]
                    });
                    wx.setStorageSync('wx_avatarurl', res.tempFilePaths[0]);
                }
              })


          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
          }
        })
    }
});

.wxss

page{
    background-color:#EFEFF4;
}
.person__top__wrapper{
    width:100%;
    box-sizing:border-box;
    padding-left:28rpx;
    padding-right:28rpx;
    padding-top:24rpx;
    padding-bottom:24rpx;
    border-top:1rpx solid #e5e5e5;
    border-bottom:1rpx solid #e5e5e5;
    height:178rpx;
    margin-top:30rpx;
    background-color:#fff;
    position: relative;
}
.person__top__avatar{
    border:1rpx solid #e5e5e5;
    width:130rpx;
    height:130rpx;
    overflow: hidden;
    box-sizing:content-box;
    float: left;
}
.person__top__avatar image{
    width:130rpx;
    height:130rpx;
    border-radius:7rpx;
}
.person__top__userinfo{
    right:0;
    overflow: hidden;
    position: absolute;
    left:182rpx;
    box-sizing:border-box;
    top:44rpx;
    color:#000;
    font-family:'微软雅黑';
    font-weight:500;    
    bottom:44rpx;
}
.person__top__userinfo .h2{
    width:300rpx;
    height:90rpx;
    line-height:90rpx;
    font-size:36rpx;  

}
.person__top__userinfo .h3{
    width:300rpx;
    height:60rpx;
    font-size:30rpx;  

}
.person__top__userinfo .h4{
    width:300rpx;
    height:30rpx;
    font-size:24rpx;    
}
.person__top__userinfo::after {
  content: " ";
  display: inline-block;
  height: 17rpx;
  width: 17rpx;
  border-width: 2rpx 2rpx 0 0;
  border-color: #C6C6CB;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 50%;
  margin-top: -10rpx;
  right: 30rpx;
}
.person__top__userinfo image{
  display: inline-block;
  height: 34rpx;
  width: 34rpx;
  top: 50%;
  margin-top: -17rpx;
  position: absolute;
  right: 58rpx;
}

js代码很简单，下面看一下后面处理的方法，主要作 用是将图片存在服务器上，更新数据库中用户信息。

用的是Thinkphp5
在API控制器中新建一个接口

 /*上传头像图片*/
   public function uploadavatarurl(){
           $req = request();
           $file = $req -> file('avatar');
           $user_id = $req -> param('user_id');
           $path = ROOT_PATH . 'public' . DS . 'upload/avator';
           $info = $file -> move($path);
           if($info){
               $saveName = $info->getSaveName();
               $row = db('users') -> where('user_id' , $user_id) -> update(['wx_avatarurl' => 'https://'.$_SERVER['HTTP_HOST'].'/public/upload/avator/'.$saveName]);
               if($row){
                   rjson(['avatarUrl' => $saveName],1);
               }else{
                   rjson([],0);
               }
           }else{
               rjson($file->getError(),0);
           }
   }

打完收工，如果更好的办法，或者有不懂的可以留言交流

分享到:
共14条评论
Ctrl+Enter
作者

刘冰华

刘冰华

APP:0 帖子:15 回复:29 积分:953

已加入社区[2921]天

屌丝男士

作者详情》
精品推荐课程更多
网站logo

wxappclub.com微信小程序俱乐部是国内最大最具影响力的微信小程序社区，致力于微信小程序技术研究、教学、推广和运营。

Copyright © 微信小程序俱乐部 鲁ICP备14005628号-8

Top