微信小程式開發（二）圖片上傳+服務端接收
阿新 • • 發佈：2019-01-24
上次介紹了小程式開發中的微信登入。文章：
微信小程式開發(一) 微信登入流程，
這次介紹下小程式當中常用的圖片上傳。
前幾天做了圖片上傳功能，被坑了一下。接下來我們來看一下微信的上傳api。
這裡的filePath就是圖片的儲存路徑，型別居然是個String，也就是 只能每次傳一張圖片，我以前的介面都是接收一個array，我本人又是一個半吊子的php，只能自己去改接收圖片的介面。
看一下頁面效果圖
一個很常見的修改頭像效果，選擇圖片（拍照），然後上傳。
下面就是貼程式碼了
首先是小程式的wxml程式碼
<view class="xd-container"> <form bindsubmit="bindSaveTap"> <image class="xd-img-user1" catchtap="chooseImageTap" src="{{logo}}"></image> <view class="xd-view-section"> <text class="xd-abs xd-flex-left xd-text-nick">暱稱</text> <input name="nick_name" placeholder="請輸入暱稱" class="xd-input" value="{{userInfo.user_name}}"/> </view> <view class="xd-view-section1"> <text class="xd-abs xd-flex-left xd-text-nick">寶寶性別</text> <radio-group class="xd-abs xd-radio-group" name="baby_sex"> <label class="xd-label-radio" wx:for="{{sex_items}}" wx:key="item"> <radio color="#3cc975" value="{{item.name}}" wx:if="{{item.name==userInfo.baby_sex}}" checked="true"/> <radio color="#3cc975" value="{{item.name}}" wx:else checked="false"/> <text class="xd-radio-text">{{item.value}}</text> </label> </radio-group> </view> <view class="xd-view-section1"> <text class="xd-abs xd-flex-left xd-text-nick">寶寶年齡</text> <input placeholder="請輸入年齡" wx:if="{{userInfo.baby_age != 0}}" value="{{userInfo.baby_age}}" class="xd-input"/> <input name="baby_age" placeholder="請輸入年齡" wx:else value="" class="xd-input"/> </view> <button size="default" class="xd-abs xd-subBtn" formType="submit" hover-class="xd-subBtn-hover">儲存</button> </form> </view>
css程式碼我就不貼了，一些樣式而已。
對應的JS程式碼
var util = require('../../../utils/util.js') var app = getApp() Page({ data: { sex_items: [ {name:'1', value:'小王子'}, {name:'2', value:'小公主'}, {name:'0', value:'尚無'} ], logo:null, userInfo: {} }, //事件處理函式 bindViewTap: function() { wx.navigateTo({ // url: '../logs/logs' // url: '../load/load' }) }, onLoad: function () { console.log('onLoad') var that = this //呼叫應用例項的方法獲取全域性資料 app.getUserInfo(function(userInfo){ //更新資料 console.log(userInfo); that.setData({ userInfo:userInfo, logo:userInfo.logo }) }) }, bindSaveTap: function(e){ console.log(e) var formData = { uid:util.getUserID(), user_name:e.detail.value.nick_name, baby_sex:e.detail.value.baby_sex, baby_age:e.detail.value.baby_age } console.log(formData) app.apiFunc.upload_file(app.apiUrl.modify_user, this.data.logo, 'photos', formData, function(res){ console.log(res); }, function(){ }) }, chooseImageTap: function(){ let _this = this; wx.showActionSheet({ itemList: ['從相簿中選擇', '拍照'], itemColor: "#f7982a", success: function(res) { if (!res.cancel) { if(res.tapIndex == 0){ _this.chooseWxImage('album') }else if(res.tapIndex == 1){ _this.chooseWxImage('camera') } } } }) }, chooseWxImage:function(type){ let _this = this; wx.chooseImage({ sizeType: ['original', 'compressed'], sourceType: [type], success: function (res) { console.log(res); _this.setData({ logo: res.tempFilePaths[0], }) } }) } })
主要講解一下JS程式碼
1、chooseImageTap方法
用來顯示一個選擇圖片和拍照的彈窗，用到了微信的一個頁面互動的api showActionSheet，點選檢視詳細使用
顯示操作選單
2、chooseWxImage方法
主要是用來選擇圖片以及接收圖片路徑回撥的監聽，點選檢視詳細使用
從本地相簿選擇圖片或使用相機拍照
3、上傳
在chooseWxImage方法的success回撥中我們可以看到，我把返回的圖片路徑res.tempFilePaths[0] 賦值給了logo，下面我們只需要呼叫upload方法就ok了，微信的uploadFile方法被我封裝了一下變成了upload_file。
uploadFile方法
//上傳檔案
function upload_file(url, filePath, name, formData, success, fail) {
console.log('a='+filePath)
wx.uploadFile({
url: rootUrl + url,
filePath:filePath,
name:name,
header: {
'content-type':'multipart/form-data'
}, // 設定請求的 header
formData: formData, // HTTP 請求中其他額外的 form data
success: function(res){
console.log(res);
if(res.statusCode ==200 && !res.data.result_code){
typeof success == "function" && success(res.data);
}else{
typeof fail == "function" && fail(res);
}
},
fail: function(res) {
console.log(res);
typeof fail == "function" && fail(res);
}
})
}
filePath就是upload_file中我們傳進來的logo變數，也就是圖片的絕對路徑。
伺服器的接收圖片程式碼
看過我上篇文章登入流程的文章的都熟悉了我伺服器用的是php框架是Laravel。
這裡我只貼一下接收image的程式碼；
if(!empty($_FILES['photos'])){
$up_arr['logo'] = upload_logo('photos','manage/images/user','logo',$user_id,0);
$up_arr['logo'] = $up_arr['logo'][0];
$user_info['logo'] = $Server_Http_Path . $up_arr['logo'];
}
核心方法在upload_log中。
圖片接收儲存
if( !function_exists('upload_logo')){
function upload_logo( $key_name='photos', $logo_path='manage/images/nurse', $pre_name='logo', $salt='20160101',$encode = 1,$make=0 ){
$result_arr = array();
global $Server_Http_Path,$App_Error_Conf;
//分資料夾儲存
$date_info = getdate();
$year = $date_info['year'];
$mon = $date_info['mon'];
$day = $date_info['mday'];
$logo_path = sprintf("%s/%s/%s/%s",$logo_path,$year,$mon,$day);
if(!is_dir($logo_path)){
$res=mkdir($logo_path,0777,true);
}
//圖片上傳
//foreach($photos as $key => $photo ){
$photo = $_FILES['photos'];
$name = $key_name;
$file_id = Input::file($name);
if(!empty($file_id) && $file_id -> isValid()){
$entension = $file_id -> getClientOriginalExtension();
if($pre_name == 'baby'){
$new_name = $pre_name . "_" . intval($salt) ."_" .time() . "_" . salt_rand(2,2);
}else {
$new_name = $pre_name . "_" . intval($salt) ."_" . salt_rand(2,2);
}
$path_id = $file_id -> move($logo_path,$new_name."_b.".$entension);
if(!empty($path_id)){
$path_name = $path_id->getPathName();
$image_size=getimagesize($path_name);
$weight=$image_size["0"];//
$height=$image_size["1"];
///獲取圖片的高
$photo_info['url'] = $path_name;
$photo_info['width'] = $weight;
$photo_info['height'] = $height;
$result_arr[] = $photo_info;
}else{
$result_arr[] = $path_name;
}
//處理圖片
if($make == 1){
$img = Image::make($path_name)->resize(200, $height*200/$weight);
$img->save($logo_path ."/".$new_name."_s.".$entension);
//dd($img);
// return $img->response('jpg');
}
}
if(empty($result_arr)){
$response['result_code'] = -1006;
$response['result_msg'] = $App_Error_Conf[-1006];
return response($response);
}
if($encode == 1){
$result_arr = json_encode($result_arr);
}
}
return $result_arr;
}
}
這個程式碼格式真的很煩人啊，我就大概整理了一下。
這樣我們就入門了小程式圖片上傳和介面功能了。
隨意打賞：
第一時間獲取技術文章請關注微信公眾號！
