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

explorer_ddf 发布于2019-08-26 12:11 / 1795人阅读

摘要：微信选择图片遇到的坑有个需求要在微信企业号里面做开发，有个功能是选择图片，使用标签肯定是不管用了，手机上不能多选，所以使用了微信的提供的相关，这个地方真的是有坑，记录一下。

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

idc机房托管专线服务微信js-sdk 微信网站云主机选择选择图片中图片选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108197.html

vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

lieeps 2019-08-30 15:55 评论0 收藏0
vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

jsdt 2019-08-02 14:00 评论0 收藏0
vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

nodejh 2019-08-23 14:24 评论0 收藏0
微信公众号页面(VUE)中如何配置微信JS-SDK和高德地图,以及遇到的一些问题记录

摘要：安装并引入依赖包这里是说明文档下载依赖包在需要用到的模块引入检查是否引入成功可以在引入的模块中执行控制台显示以上代码表示引入成功配置微信所有需要使用的页面必须先注入配置信息，否则将无法调用开启调试模式调用的所有的返回值会 1.安装并引入JS-SDK依赖包这里是JS-SDK说明文档 1.1 npm 下载依赖包 npm install weixin-js-sdk --save 1.2.在...

Joyven 2019-08-23 17:05 评论0 收藏0
node调用微信JS SDK遇到的坑

摘要：废话不多说来说说用做服务端调用微信遇到的坑。微信都有说明不做赘述。因为以后微信返回的值才会改变，并且微信规定每天限定的访问次数如果使用库的话优势可以减少对微信服务器访问的次数提升性能。这几天要做一个H5的页面，之前没做。对我来说也是一次对新领域的接触。废话不多说来说说用node做服务端调用微信JS SDK遇到的坑。首先讲一下思路：微信JS-SDK说明文档绑定域名引入JS文件 ...

Godtoy 2019-08-20 12:33 评论0 收藏0