微信开发之 Jssdk 上传图片

众所周知 <input type="file"> 的兼容性比较差,特别是在手机上,容易出现一部分手机因文件保护而无法正确获得文件,所以条件允许的情况下,建议使用 Jssdk 的接口来替换。

我们以“上传身份证正、反面”为例:

大致流程如下:
  1. 配置好 Jssdk;
  2. 当用户点击任意一个 img-picker 的时候,触发函数调用 chooseImage 接口;
  3. chooseImage 接口返回选中图片的本地 ID,调用 uploadImage 接口将图片上传到腾讯的服务器;
  4. uploadImage 接口返回上传图片的服务器 ID;
  5. 将本地 ID 赋值给 img 的 src,实现预览;
  6. 将服务器 ID 赋值给对应的隐藏域,等待表单提交;
前端代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<img src="" alt="" id="card_a" class="img-picker">
<input type="hidden" name="card_a">
<img src="" alt="" id="card_b" class="img-picker">
<input type="hidden" name="card_b">
<script type="text/javascript">
wx.ready(function(){
$(".img-picker").on('click',function(){
var that = this;
var name = $(that).attr('id');
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var localId = res.localIds[0];
wx.uploadImage({
localId: localId,
isShowProgressTips: 1,
success: function (res) {
$(that).attr('src', localId);
$('input[name='+name+']').val(res.serverId);
}
});
}
});
});
});
</script>
表单提交之后,后端通过服务器 ID 获取图片:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public function card(){
$card_a = I('post.card_a');
$card_b = I('post.card_b');
$data['card_a'] = $this->doWechatPic($card_a,"card");
$data['card_b'] = $this->doWechatPic($card_b,"card");
dump($data);
}
public function doWechatPic($media_id,$path){
if($media_id){
$access_token = getAccessToken();
$pic_url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$media_id;
$filebody = file_get_contents($pic_url);
if($filebody){
$path = "./Uploads/".$path."/".uniqid().'.jpg';
file_put_contents($path, $filebody);
return $path;
}else{
return "";
}
}else{
return "";
}
}

其中 getAccessToken() 请参考 微信开发之 Access Token