mac 公众号网页开发整理--多图片上传

微信内网页开发，调取手机相册或者调起相机拍照上传图片，所以需要使用微信的JSSDK，前提还需要在微信公众平台配置接口安全域名，本文讲解的是本地开发阶段，需要申请测试号，接口安全域名和测试号配置是在同一页面，这里有相关测试号的申请方式，接口安全域名一同配置即可

一、前面准备完成之后，在页面引入JSSDK

jssdk地址 res.wx.qq.com/open/js/jwe… 或者 res2.wx.qq.com/open/js/jwe… 全都支持https

二、接下来就是通过config接口注入权限验证配置

其中appid、timestamp、nonceStr、signature四个参数需要后端通过接口返回，所以在页面加载的时候请求后端接口返回对应的参数之后配置下面信息

wx.config({
  debug : false,
  appId : _data.appId,
  timestamp : _data.timestamp,
  nonceStr : _data.nonceStr,
  signature : _data.signature,
  jsApiList : [
      'chooseImage',
      'previewImage',
      'uploadImage',
      'downloadImage' 
  ]
});

这里说明一点，如果你的页面需要一进页面就调起相册上传就要通过ready接口处理成功验证,我是通过用户的点击主动触发，所以写在方法里

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

var localIds = []

function chooseImage(){
  wx.chooseImage({
     count: 5,
     sizeType: ['original', 'compressed'],
     sourceType: ['album', 'camera'],
     success: function (data) {  
        localIds = data.localIds;// 返回选定照片的本地ID列表
        wxuploadImage();
     }
  });
}

调用选择照片接口之后调用上传接口，多图片上传，这里是将图片传到微信的服务器，图片会在微信服务器保存三天，通过拿serverId列表一并传给后端，然后后端从微信服务器将图片下载到自己的服务器，并将图片地址返给前端，前端注入src显示即可

后端从微信服务器下载图片的接口

var serverIds = []

function wxuploadImage(){
  if(!localIds.length){
    // 上传完成
    console.log(serverIds)//这里就是你上传之后拿到的所有图片的serverId，将这些serverId以你们后端需要的形式传给后端，然后后端返回对应的图片地址回显到页面即可
  }else {
    var localId = localIds.pop();
    wx.uploadImage({
        localId: localId.toString(),
        isShowProgressTips: 1,
        success: function(res) {
          var serverId = res.serverId;
          serverIds.push(serverId)
          wxuploadImage();
        }
    });
  }
}

需要注意的点： 前端开发工具上传图片拿到的localId都是一样的1237378768e7q8e7r8qwesafdasdfasdfaxss111，这是假的，需要在真机上调用才能正确返回