调用微信接口上传图片

根据公众号账号信息获取 access_token

<?php
$appid = "xxxxxx";
$appsecret = "xxxxxx";
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$appsecret;
$data = json_decode(file_get_contents($url),true);
$access_token = $data['access_token'];

引入 jweixin-x.x.x.js

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

调用 Js-sdk

<script>
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印.
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: ['chooseImage', 'uploadImage', 'downloadImage'] // 必填,需要使用的JS接口列表
});

wx.ready(function(){
    //
}
</script>

使用 拍照或手机相册中选图接口 和 上传图片接口 上传临时图片到微信服务器

<script>
wx.ready(function(){
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    $('#upload').on('click', function () {
      // 选择图片
      wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
          success: function (res) {
              var localIds = res.localIds[0]; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

              wx.uploadImage({
                  localId: localIds, // 需要上传的图片的本地ID,由chooseImage接口获得
                  isShowProgressTips: 1, // 默认为1,显示进度提示
                  success: function (res) {
                      $('#server_id').val(res.serverId);    // 返回图片的服务器端ID
                      // 成功操作
                  }
              });
          }
      });
    });
});
</script>

提交数据到服务器

<script>
wx.ready(function(){
    // 提交数据到服务器
    $("#submit").on("click", function () {
        $.ajax({
            url:"xxxxxx",
            type:'POST',
            dataType:'json',
            data: {
                access_token: $('#access_token').val(),
                server_id: $('#server_id').val();
            },
            success:function(data){
                console.log(data);
                // 成功操作
            }
        })
    });
});
</script>

从微信服务器中下载临时图片到服务器 (微信多媒体下载接口

<?php
$access_token = $_POST['access_token'];
$server_id = $_POST['server_id'];
// 获取图片的下载地址
$img_path = downlodimg($access_token, $server_id);

// 下载图片
function downlodimg($access_token,$server_id){
    // 微信多媒体下载接口
    $url="http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$server_id}";
    $path = "images/";
    if (!is_dir($path)) {
        // 创建上传地址文件夹
        mkdirs($path);
    }

    // 文件名
    $targetName=rand(1,100).date('YmdHis').'.jpg';

    return getImage($url, $path, $targetName);
}

// 下载远程文件到本地
function getImage($url,$save_dir='',$filename='')
{
    //根据url获取远程文件
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);

    curl_setopt($curl, CURLOPT_URL, $url);

    $res = curl_exec($curl);
    curl_close($curl);

    //把图片保存到指定目录下的指定文件
    file_put_contents($save_dir . $filename, $res);

    return tomedia($save_dir . $filename);
}