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

前端之家收集整理的这篇文章主要介绍了微信小程序开发(二)图片上传+服务端接收详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

这里写图片描述

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

看一下页面效果

@H_404_15@

一个很常见的修改头像效果,选择图片(拍照),然后上传

下面就是贴代码

首先是小程序的wxml代码

logo}}"> dio-group class="xd-abs xd-radio-group" name="baby_sex">

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

对应的JS代码

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,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的代码

PHP;"> 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中。

图片接收保存

$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 = $prename . "" . intval($salt) ."" .time() . "" . salt_rand(2,2);
}else {
$new_name = $prename . "" . 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;
}
}

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的微信小程序相关文章