微信小程序---圖片上傳+服務端接受

原文地址：http://blog.csdn.net/sk719887916/article/details/54312573

微信小程序，圖片上傳，應用地方-修改用戶信息的頭像。

詳細代碼：

小程序的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>

小程序對應的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(){
　　　　})
  },  
　//用來顯示一個選擇圖片和拍照的彈窗，用到了微信的一個頁面交互的api showActionSheet　
  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],
    　　　　})
  　　　　}
 　　})
  }
})

上傳：

在chooseWxImage方法的success回調中咱們能夠看到，我把返回的圖片路徑res.tempFilePaths[0]賦值給logo，下面只須要調用upload方法就能夠了。

封裝好的upload_file方法。

//上傳文件
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':'nultipart/form-data'
　　　　},
　　　　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變量，也就是圖片的絕對路徑。

服務器接收圖片的代碼

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['day'];
　　　　$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;
     }

}