前几天做了图片上传功能，被坑了一下。接下来我们来看一下微信的上传api。
这里的filePath就是图片的存储路径，类型居然是个String，也就是 只能每次传一张图片，我以前的接口都是接收一个array，我本人又是一个半吊子的PHP，只能自己去改接收图片的接口。
下面就是贴代码了
css代码我就不贴了，一些样式而已。
对应的JS代码
},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方法
filePath就是upload_file中我们传进来的logo变量，也就是图片的绝对路径。
看过我上篇文章登录流程的文章的都熟悉了我服务器用的是PHP框架是Laravel。
这里我只贴一下接收image的代码；
核心方法在upload_log中。
图片接收保存
$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;
}
}
这个代码格式真的很烦人啊，我就大概整理了一下。
原文链接：https://www.f2er.com/weapp/42669.html