详解微信JS-SDK选择图片遇到的坑

有个需求要在微信企业号里面做开发，有个功能是选择图片，使用input标签肯定是不管用了，android手机上不能多选，所以使用了微信的js-sdk提供的相关api，这个地方真的是有坑，记录一下。按照文档直接引入js文件即可，如果使用的是vue，也可以使用weixin-js-sdk，两种方式都可以。

图片在android上无法预览

js-sdk的chooseimage 接口返回的结果是localid，类似于wxlocalresource://xxxxxx，如果想得到它的base64串需要再调用getlocalimgdata方法，因为我们后台接口里需要用到这个base64串，所以通过这个接口来获取base64串作展示，而不是用文档里介绍的方法。那这里有个坑，从android获取的localdata是不带有base64前缀的，要处理一下。

selectimage: function () {
  let context = this;
  wx.chooseimage({
    count: 9,
    sizetype: ['compressed'], 
    sourcetype: ['album', 'camera'], 
    defaultcameramode: "normal", 
    success: function (res) {
      // localids是在data里定义的一个localid数组
      context.localids = res.localids;
      // 不能直接遍历这个数组
      context.updatebase64data(context.localids.shift());
    },
    fail: function (res) {
      alert('选择图片失败:' + res.errmsg);
    },
  });
},
updatebase64data: function (localid) {
  let context = this;
  wx.getlocalimgdata({
    localid: localid, // 图片的localid
    success: function (res) {
      let localdata = res.localdata;
      let prefix = 'base64,';
      let index = localdata.indexof(prefix);
      let actdata = localdata;
      // 我现在是设置参数，如果是展示的话则应该是添加头部data:image/jpeg;base64,
      if (index > -1) {
        actdata = localdata.substring(index + 7);
      }
      // base64array是在data里定义的一个base64串数组
      context.base64array.push(actdata);
      
      if (context.localids.length > 0) {
        context.updatebase64data(context.loaclids.shift());
      } else {
        // 执行处理
      }
    },
    fail: function (res) {
      alert('选择图片失败:' + res.errmsg);
    },
  });
},

getlocalimgdata获取多张图片无响应

chooseimage方法获取到是一个localid的数组，如果直接遍历这个数组去调用getlocalimgdata时它只会执行一次，后面的无论怎样都不会执行，猜测应该是跟它localid的获取有关系。所以采取了上面代码中递归的方式调用，当连续调用uploadimage上传图片时也要这么做。

android无法选择原图

尽管在chooseimage方法可以通过sourcetype字段指定是原图还是压缩后的图，但是只要调用了getlocalimgdata方法，那获取到的base64串展示一定是模糊的。你在想是不是android上面不能使用原图啊，错了，仔细看ios上面的图也是不清楚的，测试发现确实是这样，原图1.8m，使用js-sdk选择的原图只有不到240k，那为什么android会模糊但是ios比较清楚呢，你是不是又想这不是ios和android系统的区别吧，把同一张图片通过getlocalimgdata方法获取到的base64串做比对发现，android上得到的base64串前缀是以gcm开头，而ios则是以/9j/开头，从pc上选择的图也是以/9j/开头，自己解析的图片也是以/9j/开头，所以不是因为压缩变模糊了，是因为使用了不一样的编码变模糊了。如果真的想选择原图，先把图片上传到微信服务器，然后使用获取临时素材的接口https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token=access_token&media_id=media_id，把图片下载下来，经测试这样其实也是有压缩的，这个是企业号的api如果用公众号地址是https://api.weixin.qq.com/cgi-bin/media/get?access_token=access_token&media_id=media_id。代码就不贴了，与上面的基本一致。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。