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

忘是亡心i 2022-04-03 03:45 120阅读 0赞

# 微信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`。代码就不贴了，与上面的基本一致。

来源：[https://segmentfault.com/a/1190000016013722][https_segmentfault.com_a_1190000016013722]

[https_segmentfault.com_a_1190000016013722]: https://segmentfault.com/a/1190000016013722