thinkphp微信开发之jssdk图片上传并下载到本地服务器

public function test2(){
        $Weixin = new \Weixin\Controller\BaseController();
        $this->assign('signPackage', $Weixin->jssdk->GetSignPackage());
        $this->display();
}

html核心代码

<script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<form action="{:U('doJoin')}"  method="post">
<h3 class="title">参赛人员照片：</h3>
                <div>   
                   <img class="preview" src="{$vote.vote_pic|get_cover='thumb'}" alt="">
                   <if condition="!$vote['status']" ><button class="uploadImage" type="button" id="vote_pic">点击上传（建议上传800*600的png,jpg,或者gif格式图片）</button></if>
                   <input type="hidden" name="vote_pic">                   
                </div>
<button class="bbon" type="submit" id="submit">提交</button>
</form>
<script>  
 wx.config({
    debug: false,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
    // 所有要调用的 API 都要加到这个列表中
    'chooseImage',
    'previewImage',
    'uploadImage',
    'downloadImage'
    ]
  });
  wx.ready(function () {
// 5.1 拍照、本地选图
      var images = {
        localId: [],
        serverId: []
      };

// 5.3 上传图片
$(".uploadImage").click(function(){
        var that =$(this);
        images.localId = [];
        wx.chooseImage({
          success: function (res) {
            images.localId = res.localIds;
            if (images.localId.length == 0) {
                alert('请先使用 chooseImage 接口选择图片');
                return;
            }
            if(images.localId.length > 1) {
                alert('目前仅支持单张图片上传,请重新上传');
                images.localId = [];
                return;
            }
            var i = 0, length = images.localId.length;
            images.serverId = [];
            function upload() {
                         wx.uploadImage({
                                    localId: images.localId[i],
                                    success: function (res) {
                                        i++;                             
                                       that.siblings('img.preview').attr('src',images.localId[0]);
                                        // alert('已上传：' + i + '/' + length);                                       
                                        images.serverId.push(res.serverId);
                                        that.siblings('input[type=hidden]').val(images.serverId[0]);
                                        // alert( that.siblings('input[type=hidden]').val());
                                        if (i < length) {
                                                upload();
                                        }
                                    },
                                    fail: function (res) {
                                                alert(JSON.stringify(res));
                                     }
                          });
            }
            upload();
          }
        });
});
        

$("#submit").click(function(){
    $.ajax({
            type: 'post',
            url: $("form").attr('action')  ,
            data : $("form").serialize(),
            dataType: 'json',
            success : function(data){
                    if(data.status){
                                       alert(data.info);
                                       window.location.href = data.url;      
                    }else{                      
                    }
                    
                                            
            }
        });
    return false;
})     
  });
</script>

提交到服务器端 服务器端处理过程如下

public doJoin(){
        if(IS_POST && $_POST['vote_pic']){   //提交过来的vote_pic是微信服务器端的图像资源id
            $pic_id = $_POST['vote_pic'];
            $return = array();
            C('WEIXIN_UPLOAD') = './Uploads/Weixin/';//定义保存路径            
            $dir = realpath(C('WEIXIN_UPLOAD')).'/'.date('Y_m_d').'/';//为方便管理图片 保存图片时 已时间作一层目录作区分
            if(!file_exists($dir)){
                mkdir($dir,'0777');
            }
            $Weixin = new \Weixin\Controller\BaseController();
            $pic_url = $Weixin->WechatAuth->mediaGet($pic_id); //获取服务器图片路径
            $time = time().substr($pic_id, 9,3);
            $filename = 'wx_'.$time.'.jpg';   //定义图片文件名
            $Http = new \Org\Net\Http;
            if($Http::curlDownload($pic_url,$dir.$filename)){//http下载图片
                $this->success('提交成功',U('index'));
            }   


        }

        

    }