微信小程序开发之图片上传+服务端接收教程

前几天做了图片上传功能，被坑了一下。接下来我们来看一下微信的上传api。

一个很常见的修改头像效果，选择图片（拍照），然后上传。

下面就是贴代码了

首先是小程序的wxml代码

 昵称
 


 宝宝性别
 
 
 
 
 {{item.value}}
 
 


 宝宝年龄
 
 

保存

css代码我就不贴了，一些样式而已。

对应的JS代码

var util = require(&＃39;../../../utils/util.js&＃39;)
var app = getApp()
Page({
 data: {
sex_items: [
 {name:&＃39;1&＃39;, value:&＃39;小王子&＃39;},
 {name:&＃39;2&＃39;, value:&＃39;小公主&＃39;},
 {name:&＃39;0&＃39;, value:&＃39;尚无&＃39;}
],
logo:null,
 
userInfo: {}
 },
 
 //事件处理函数
 bindViewTap: function() {
wx.navigateTo({
 // url: &＃39;../logs/logs&＃39;
// url: &＃39;../load/load&＃39;
})
 },
 onLoad: function () {
console.log(&＃39;onLoad&＃39;)
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, &＃39;photos&＃39;, formData, 
function(res){
 console.log(res);
},
function(){
})
 }, 
 
 chooseImageTap: function(){
let _this = this;
wx.showActionSheet({
 itemList: [&＃39;从相册中选择&＃39;, &＃39;拍照&＃39;],
 itemColor: "#f7982a",
 success: function(res) {
 if (!res.cancel) {
 if(res.tapIndex == 0){
 _this.chooseWxImage(&＃39;album&＃39;)
 }else if(res.tapIndex == 1){
 _this.chooseWxImage(&＃39;camera&＃39;)
 }
 }
 }
})
 
 },
chooseWxImage:function(type){
let _this = this;
wx.chooseImage({
 sizeType: [&＃39;original&＃39;, &＃39;compressed&＃39;],
 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(&＃39;a=&＃39;+filePath)
wx.uploadFile({
 url: rootUrl + url,
 filePath:filePath,
 name:name,
 header: {
 &＃39;content-type&＃39;:&＃39;multipart/form-data&＃39;
 }, // 设置请求的 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[&＃39;photos&＃39;])){
  $up_arr[&＃39;logo&＃39;] = upload_logo(&＃39;photos&＃39;,&＃39;manage/images/user&＃39;,&＃39;logo&＃39;,$user_id,0);
  $up_arr[&＃39;logo&＃39;] = $up_arr[&＃39;logo&＃39;][0];
  $user_info[&＃39;logo&＃39;] = $Server_Http_Path . $up_arr[&＃39;logo&＃39;];
}

核心方法在upload_log中。

图片接收保存

if( !function_exists(&＃39;upload_logo&＃39;)){
 function upload_logo( $key_name=&＃39;photos&＃39;, $logo_path=&＃39;manage/images/nurse&＃39;, $pre_name=&＃39;logo&＃39;, $salt=&＃39;20160101&＃39;,$encode = 1,$make=0 ){
  $result_arr = array();
  global $Server_Http_Path,$App_Error_Conf;
  //分文件夹保存 
  $date_info = getdate();
  $year = $date_info[&＃39;year&＃39;];
  $mon = $date_info[&＃39;mon&＃39;];
  $day = $date_info[&＃39;mday&＃39;];
  $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[&＃39;photos&＃39;];
  $name = $key_name;
 
  $file_id = Input::file($name);
  if(!empty($file_id) && $file_id -> isValid()){
   $entension = $file_id -> getClientOriginalExtension();
   if($pre_name == &＃39;baby&＃39;){
    $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[&＃39;url&＃39;] = $path_name;  
 
   $photo_info[&＃39;width&＃39;] = $weight;
  $photo_info[&＃39;height&＃39;] = $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(&＃39;jpg&＃39;);
    }
   }
if(empty($result_arr)){
 $response[&＃39;result_code&＃39;] = -1006;
 $response[&＃39;result_msg&＃39;] = $App_Error_Conf[-1006];
  return response($response);
   }
 if($encode == 1){
    $result_arr = json_encode($result_arr);
   }
  }
  return $result_arr;
 }
 }

这个代码格式真的很烦人啊，我就大概整理了一下。

这样我们就入门了小程序图片上传和接口功能了。

以上就是微信小程序开发之图片上传+服务端接收教程的内容，更多相关内容请关注PHP中文网（www.php.cn）！