微信小程序开发（二）图片上传+服务端接收详解

微信小程序开发（二）图片上传+服务端接收详解

这次介绍下小程序当中常用的图片上传。

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

这里的filePath就是图片的存储路径，类型居然是个String，也就是 只能每次传一张图片，我以前的接口都是接收一个array，我本人又是一个半吊子的php，只能自己去改接收图片的接口。

看一下页面效果图

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

下面就是贴代码了

首先是小程序的wxml代码

昵称

宝宝性别

{{item.value}}

宝宝年龄

保存

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 ==tuXicnfs200 && !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"];///获取图片的高

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;

}

}

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。