精華
實(shí)現(xiàn)上傳頭像功能——微信小程序
- • 發(fā)表于 8年前
- • 作者 劉冰華
- • 11981 人瀏覽
- • 14 條評論
- • 最后編輯時間 8年前
- • 來自 [技 術(shù)]
原創(chuàng)聲明:本文為作者原創(chuàng)，未經(jīng)允許不得轉(zhuǎn)載，經(jīng)授權(quán)轉(zhuǎn)載需注明作者和出處
作者原創(chuàng)，轉(zhuǎn)載請注明出處
作者：劉冰華
2016-12-8 13：30
慣例先看成品
點(diǎn)擊彈出選擇本地或是拍照，選完后上傳到服務(wù)器，本地緩存更新
最重要的還是看代碼：
.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">
地區(qū)
</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, // 最多可以選擇的圖片張數(shù)，默認(rèn)9
sizeType: ['compressed'], // original 原圖，compressed 壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], // album 從相冊選圖，camera 使用相機(jī)，默認(rèn)二者都有
success: function(res){
wx.uploadFile({
url:that.data.API_URL +'uploadavatarurl',
filePath:res.tempFilePaths[0],
name:'avatar',
// header: {}, // 設(shè)置請求的 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代碼很簡單，下面看一下后面處理的方法，主要作 用是將圖片存在服務(wù)器上，更新數(shù)據(jù)庫中用戶信息。
用的是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
