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

<h1>微信JS-SDK选择图片遇到的坑</h1> <p>有个需求要在微信企业号里面作开发，有个功能是选择图片，使用<code>input</code>标签确定是无论用了，Android手机上不能多选，因此使用了微信的JS-SDK提供的相关API，这个地方真的是有坑，记录一下。按照文档直接引入js文件便可，若是使用的是Vue，也可使用<code>weixin-js-sdk</code>，两种方式均可以。</p> <h3>图片在Android上没法预览</h3> <p>js-sdk的<code>chooseImage </code>接口返回的结果是localId，相似于<code>wxLocalResource://xxxxxx</code>，若是想获得它的base64串须要再调用<code>getLocalImgData</code>方法，由于咱们后台接口里须要用到这个base64串，因此经过这个接口来获取base64串做展现，而不是用文档里介绍的方法。那这里有个坑，从Android获取的localData是不带有base64前缀的，要处理一下。</p>segmentfault

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 &gt; -1) {
                actData = localData.substring(index + 7);
            }
            // base64Array是在data里定义的一个base64串数组
            context.base64Array.push(actData);
            
            if (context.localIds.length &gt; 0) {
                context.updateBase64Data(context.loaclIds.shift());
            } else {
                // 执行处理
            }
        },
        fail: function (res) {
            alert('选择图片失败:' + res.errMsg);
        },
    });
},

<h3>getLocalImgData获取多张图片无响应</h3> <p><code>chooseImage</code>方法获取到是一个localId的数组，若是直接遍历这个数组去调用<code>getLocalImgData</code>时它只会执行一次，后面的不管怎样都不会执行，猜想应该是跟它localId的获取有关系。因此采起了上面代码中递归的方式调用，当连续调用<code>uploadImage</code>上传图片时也要这么作。</p> <h3>Android没法选择原图</h3> <p>尽管在<code>chooseImage</code>方法能够经过sourceType字段指定是原图仍是压缩后的图，可是只要调用了<code>getLocalImgData</code>方法，那获取到的base64串展现必定是模糊的。你在想是否是Android上面不能使用原图啊，错了，仔细看IOS上面的图也是不清楚的，测试发现确实是这样，原图1.8M，使用js-sdk选择的原图只有不到240K，那为何Android会模糊可是IOS比较清楚呢，你是否是又想这不是IOS和Android系统的区别吧，把同一张图片经过<code>getLocalImgData</code>方法获取到的base64串作比对发现，Android上获得的base64串前缀是以<code>gCM</code>开头，而IOS则是以<code>/9j/</code>开头，从PC上选择的图也是以<code>/9j/</code>开头，本身解析的图片也是以<code>/9j/</code>开头，因此不是由于压缩变模糊了，是由于使用了不同的编码变模糊了。若是真的想选择原图，先把图片上传到微信服务器，而后使用获取临时素材的接口<code>https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID</code>，把图片下载下来，经测试这样其实也是有压缩的，这个是企业号的API若是用公众号地址是<code>https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID</code>。代码就不贴了，与上面的基本一致。</p>api

来源：https://segmentfault.com/a/1190000016013722数组