本篇內(nèi)容介紹了“微信小程序怎么實(shí)現(xiàn)圖片上傳+服務(wù)端接收功能”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設(shè)|成都網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋成都?jí)w彩繪等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身策劃品質(zhì)網(wǎng)站。

微信的上傳api。

這里的filePath就是圖片的存儲(chǔ)路徑，類型居然是個(gè)String，也就是 只能每次傳一張圖片，我以前的接口都是接收一個(gè)array，我本人又是一個(gè)半吊子的PHP，只能自己去改接收?qǐng)D片的接口。

看一下頁(yè)面效果圖

一個(gè)很常見(jiàn)的修改頭像效果，選擇圖片（拍照），然后上傳。

下面就是貼代碼了

首先是小程序的wxml代碼

 昵稱
 


 寶寶性別
 
 
 
 
 {{item.value}}
 
 


 寶寶年齡
 
 

保存

css代碼我就不貼了，一些樣式而已。

對(duì)應(yīng)的JS代碼

var util = require('../../../utils/util.js')
var app = getApp()
Page({
 data: {
sex_items: [
 {name:'1', value:'小王子'},
 {name:'2', value:'小公主'},
 {name:'0', value:'尚無(wú)'}
],
logo:null,

userInfo: {}
 },

 //事件處理函數(shù)
 bindViewTap: function() {
wx.navigateTo({
 // url: '../logs/logs'
// url: '../load/load'
})
 },
 onLoad: function () {
console.log('onLoad')
var that = this
//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function(userInfo){
 //更新數(shù)據(jù)
 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: ['從相冊(cè)中選擇', '拍照'],
 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方法

用來(lái)顯示一個(gè)選擇圖片和拍照的彈窗，用到了微信的一個(gè)頁(yè)面交互的api showActionSheet，點(diǎn)擊查看詳細(xì)使用

顯示操作菜單

2、chooseWxImage方法

主要是用來(lái)選擇圖片以及接收?qǐng)D片路徑回調(diào)的監(jiān)聽(tīng)，點(diǎn)擊查看詳細(xì)使用

從本地相冊(cè)選擇圖片或使用相機(jī)拍照

3、上傳

在chooseWxImage方法的success回調(diào)中我們可以看到，我把返回的圖片路徑res.tempFilePaths[0] 賦值給了logo，下面我們只需要調(diào)用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'
 }, // 設(shè)置請(qǐng)求的 header
 formData: formData, // HTTP 請(qǐng)求中其他額外的 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中我們傳進(jìn)來(lái)的logo變量，也就是圖片的絕對(duì)路徑。

服務(wù)器的接收?qǐng)D片代碼

看過(guò)我上篇文章登錄流程的文章的都熟悉了我服務(wù)器用的是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"];///獲取圖片的高
if($pre_name == "baby" || $pre_name == "video") {   

   $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;
 }
 }

“微信小程序怎么實(shí)現(xiàn)圖片上傳+服務(wù)端接收功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！