调用微信接口上传图片总结

最开始实现图片上传用的是<input type=”file”>插件来实现的。用这种方法在pc以及苹果的平台上可以很好的兼容，但是在android上各种机型的兼容性各有差异，总体上看兼容性很差。因为小小创客是属于移动端微信开发的一部分，如果不能很好的兼容苹果，android，一切都是徒劳的。为了解决这一问题，我们团队从原来的使用<input type=”file”>上传转向调用微信现成接口实现上传。

微信接口上传的思路为：移动端调用微信接口拍照或者从相册选择图片——>调用微信上传接口上传图片到微信服务器（图片只能在微信服务器保存3天）——>利用图片下载接口将上传到微信服务器上的图片下载到自己服务器,这样就完成了图片的上传。

微信为开发者提供了一套非常完备的接口：

       

上图是微信开发js-sdk文档中的部分接口，其中就有专门的图像接口，而且功能十分完备有拍照、从相册选择图片，预览图片，上传图片，下载图片的接口。

实现微信接口上传的第一步便是要获得接口权限。

1．  接口权限获得方法

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。如果你使用了支付类接口，请确保支付目录在该安全域名下，否则将无法完成支付。

备注：登录后可在“开发者中心”查看对应的接口权限。

步骤二：引入JS文件

 

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

请注意，如果你的页面启用了https，务必引入https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK

如需使用摇一摇周边功能，请引入 jweixin-1.1.0.js

备注：支持使用AMD/CMD 标准模块加载方法加载

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息

wx.config({

    debug: true, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

    appId: '', //必填，公众号的唯一标识

    timestamp: , //必填，生成签名的时间戳

    nonceStr: '',//必填，生成签名的随机串

    signature:'',//必填，签名，见附录1

    jsApiList: []//必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

      其中最重要的一步就是签名生成。签名生成步骤：使用AppID和AppSecret调用本接口来获取access_token，然后用拿到的access_token采用http GET方式请求获得jsapi_ticket

成功返回如下JSON：

{

"errcode":0,

"errmsg":"ok",

"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",

"expires_in":7200

}

     获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名了。

     签名生成算法：

       （签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。）

        步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1

        步骤2.对string1进行sha1签名，得到signature

2.调用接口实现上传功能

  当第一步中config接口注入权限验证配置完成后便能使用微信提供的接口来实现上传功能了。

  wx.ready(function(){     // 在这里面调用微信接口   debug: false,      appId: '',      timestamp:’’,      nonceStr: '',      signature: '',      jsApiList: [             //这里是所要调用的接口名称，因为要实现上传，所以调用图像的四个接口            'chooseImage',            'previewImage',            'uploadImage',            'downloadImage',        ]    //在这里写具体调用接口的函数});

完成了这步，我们的图片已经上传到微信的服务器上了，接下来我们要做的是将图片从微信服务器上下载到自己的服务器上。

3.下载上传到微信服务器上的图片到自己服务器

    每张图片上传到微信服务器上会自动返回用户一个media_id，用户可以根据所返回media_id来下载图片到自己的服务器上 方法为：

   

$url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$token."&media_id=".$media_id."";function http_get_data($url) {    $ch = curl_init ();  curl_setopt ( $ch, CURLOPT_CUSTOMREQUEST, 'GET' );  curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER, false );  curl_setopt ( $ch, CURLOPT_URL, $url );  ob_start ();  curl_exec ( $ch );  $return_content = ob_get_contents ();  ob_end_clean ();    $return_code = curl_getinfo ( $ch, CURLINFO_HTTP_CODE );  return $return_content;  } $return_content = http_get_data($url);  

$return_content中就是图片，然后通过file_put_contents($file_url,$return_content)将图片放到你想要的地方

这样就完成了图片的上传

 四个接口的使用方法：

       拍照或从手机相册中选图接口

            wx.chooseImage({    count: 1, // 默认9    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有    success: function (res) {        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片    }});

预览图片接口

wx.previewImage({    current: '', // 当前显示图片的http链接    urls: [] // 需要预览的图片http链接列表});

上传图片接口

wx.uploadImage({    localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得    isShowProgressTips: 1, // 默认为1，显示进度提示    success: function (res) {        var serverId = res.serverId; // 返回图片的服务器端ID    }});

 

下载图片接口

wx.downloadImage({    serverId: '', // 需要下载的图片的服务器端ID，由uploadImage接口获得    isShowProgressTips: 1, // 默认为1，显示进度提示    success: function (res) {        var localId = res.localId; // 返回图片下载后的本地ID    }});