微信js-sdk 图片接口

@博乐

最近做的项目，需要利用微信端进行拍照，然后将图片上传到本地应用的服务器上。

经过调研发现，微信自带提供的 js-sdk 图片接口符合需求，所以按照如下方法步骤进行实践。

(1) 必读必学的东西

微信JS-SDK Demo、微信JS-SDK说明文档  ，大家可以先看下官方提供的文档和demo。

(2)  总结下使用”图片接口“的步骤；

    首先要有一个微信公众号，必须是认证后的，不然到配置完成后 就是提示你没有权限 那就恶心了。

    第一 ：阅读   微信JS-SDK说明文档 的  1.1 JSSDK使用步骤 ，将你自己的微信公众号 按照五部进行处理。

    记住 微信的appid 和 appsercert。

• •  
•  第二：编写jsp
• 首先要引入  <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  

  <script language="javascript">
  wx.config({
      debug: true,      //  刚开始配置的时候 用true  会给予错误提示， 配置无误后 在修改为 false  就没有提示了
      appId: '${appid}', // 必填，公众号的唯一标识
      timestamp: '${timestamp}', // 必填，生成签名的时间戳
      nonceStr: '${nonceStr}', // 必填，生成签名的随机串
      signature: '${signature}',// 必填，签名，见附录1
      jsApiList: [
         'checkJsApi',
        'chooseImage',       
        'uploadImage',
        'downloadImage'
      ]
  });

 </script>  

注意：此处 appId 、timestamp、nonceStr、signature 均是动态生成，

这样的话后期调用的时候就不会报错：地址已过期。

动态生成的方法我会传到下载资料里。

//  准备阶段  该段可以配置你的配置是否正常

wx.ready(function () {
  // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
  document.querySelector('#checkJsApi').onclick = function () {
    wx.checkJsApi({
      jsApiList: [  
                  'checkJsApi',     
                  'chooseImage',
                  'uploadImage',
                  'downloadImage'          
      ],
      success: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

//  关键的代码  调用微信的接口 可以使用手机上的 摄像头 进行拍照或者选图

  // 5 图片接口
  // 5.1 拍照、本地选图
  var images = {
    localId: [],
    serverId: []
  };
  var uploadserverId=null;
  var accessToken = '${accessToken}' ;  
  var num=0; //定义一个全局变量
  
  document.querySelector('#chooseImage').onclick = function () {
    wx.chooseImage({  // sizeType: ['original', 'compressed'],
      sizeType: ['compressed'],    //   拍的照片很大可以自动压缩 便于传输
      success: function (res) {     
        if (res.localIds.length==1){        
        //var textid="paizhao"+num;
        var text="<input type='text' id = "+ num + " value=''/></br>";        
       $("#div").append(text);
         $("#"+num ).val(res.localIds[0]);
         images.localId[num] = res.localIds[0];  
         num=num+1;        
        }else{
        //var textid="xuantu"+num;
        for (var i=0;i<res.localIds.length;i++)
         {        
             var text="<input type='text' id = "+ (num+i)+ " value=''/></br>";
             $("#div").append(text);
          $("#"+(num+i) ).val(res.localIds[i]);      // 添加到路径下
             images.localId[num+i] = res.localIds[i];
         }
        num=num+res.localIds.length;
        } 
      }
    });    
  };
  
    // 5.3 上传图片  调用该接口 将图片上传到本地服务器上    使用的ajax 异步传送   该 方法我会传到下载资料里。
   var imagename = new Array();
    
   document.querySelector('#uploadImage').onclick = function () {
    alert("begin");
    if (images.localId.length == 0) {
      alert('请先使用 chooseImage 接口选择图片');
      return;
    } 
    var i = 0, length = images.localId.length;
    images.serverId = [];


    function upload() { 
      wx.uploadImage({
        localId: images.localId[i],
         isShowProgressTips : 1, // 默认为1，显示进度提示
        success: function (res) {         
          i++;
          //alert('已上传：' + i + '/' + length);
          imagename.push(res.serverId);
          $("#iMAGENAME").val(imagename);
          alert(imagename);
         $.ajax({
       async: false,  //false  修改为异步
       type: "POST",    
       url: "${pageContext.request.contextPath}/itilgongdan/wechatgongdan/upload.do",
       data:{"serverId": res.serverId , "accessToken": accessToken},  
      success: function(data){
             alert("上传成功!");
      },
      error:function(data){
             alert("上传失败!");
               }     
         });          
               
          if (i < length) {
            upload();
          }
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
    }
    
    upload();    
    
    alert("end");   
  };

常见问题提醒：

(1)   invalid signature    访问的地址不能url   需要在 公众号的  可信域名 里添加。

(2)   system:permission denied  没有权限的公众号，认证后的肯定没问题，又或者是秘钥不对。