ThinkPHP微信开发实例——JSSDK图像接口上传下载并将图

前端

html:
<div>  
    <img class="preview" src="{$ig'}" style="width: 250px;"/>  
    <button class="uploadImage" type="button" id="vt">点击上传</button>  
    <input id="ig" type="hidden" name="media_id" value="{$ig}">  
</div>  

script:
<script type="text/javascript" src="/jweixin-1.0.0.js"></script>  
<script>  
  wx.config({  
    debug: false,  
    appId: '<?php echo $signPackage["appId"];?>',  
    timestamp: <?php echo $signPackage["timestamp"];?>,  
    nonceStr: '{$signPackage["nonceStr"]}',  
    signature: '{$signPackage["signature"]}',  
    jsApiList: [  
      /* 所有要调用的 API 都要加到这个列表中*/  
      'chooseImage',  
      'previewImage',  
      'uploadImage',  
      'downloadImage'  
    ]  
  });  
  wx.ready(function() {  
    //手机相册选图或拍照  
    var images = {  
        localId: [],  
        serverId: []  
    };  
    //上传图片  
    $(".uploadImage").click(function() {  
        var that = $(this);  
        images.localId = [];  
        wx.chooseImage({  
            success: function(res) {  
                images.localId = res.localIds;// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片  
                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++;  
                    var media_id = res.serverId; /*返回图片的服务器端ID,serverId 即 media_id*/                                                                    that.siblings('img.preview').attr('src', images.localId[0]);  
                that.siblings("input[name='media_id']").val(media_id);//对隐藏域赋值传到后台处理  
                            images.serverId.push(res.serverId);  
                            if (i < length) {//现在只能单张  
                                upload();  
                            }  
                        },  
                        fail: function(res) {  
                            alert(JSON.stringify(res));  
                        }  
                    });  
                }  
                upload();  
            }  
        });  
    });  
});  
</script>  

后台：

        $appid = C ( "WX_APPID" );
        $appsecret = C ( "WX_CRYPT" );
        $jssdk = new WechatJs($appid, $appsecret);
        $signPackage = $jssdk->GetSignPackage();
        $this->assign('signPackage',$signPackage);

 /* 
 * 获取media_id 
 */  
       public function add(){  
    if(IS_POST){  
        $serverId = I('post.media_id');  
        if(!empty($serverId)){  
            $data['imgpath'] = $this->doWechatPic( $serverId );  
        }  
}  
  
/* 
 * 从微信服务器获取图片流 
 */  
public function doWechatPic($serverId){//media_id=jlJs_iQIOA-TKLuhk4nCdPEdXnJ6paIeToO8vr-WUGvz05-6i5n498EzI232xSxn  
              $media_id = $serverId;//提交过来的serverId即$media_id     
        $access_token = $this->access_token;  
            $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);//通过接口获取图片流  
               $filename = uniqid().'.jpg';            //定义图片名字及格式  
        return $this->saveFile($filename, $filebody);  
}  
  
/* 
 * 定义文件路径，写入图片流 
 */  
public function saveFile($filename, $filecontent){  
    $upload_dir = "./image/".date("Ymd");//保存路径，以时间作目录分层  
           $mkpath = $upload_dir;          
    if(!is_dir($mkpath)){  
        if(!mkdir($mkpath)){  
            die('no mkdir power');  
        }  
        if(!chmod($mkpath,0755)){//若服务器在阿里云上不建议使用0644  
            die('no chmod power');  
        }  
    }         
    $savepath = $upload_dir.'/'.$filename;        
    if(file_put_contents($savepath, $filecontent)){//写入图片流生成图片  
        return $upload."/".$filename;//返回图片路径  
    }else{  
        die('save failed');  
    }  
      
}