企业微信-面部采集功能(微信JS-SDK调用手机相机拍照上传)

企业微信文档https://work.weixin.qq.com/api/doc/90000/90136/90512
1.引入JS文件


2.获取 wx.config要用到的配置参数

  • 参考文档:通过config接口注入权限验证配
    https://work.weixin.qq.com/api/doc/90000/90136/90514
getWxConfig() {
   	const params = {
        url: window.location.href.split('#')[0],
    };
    getJsapi(params).then((res) => {
        if (res.code == 1) {
            this.config = {
                appId: res.data.appId,
                timestamp: res.data.timestamp,
                nonceStr: res.data.nonceStr,
                signature: res.data.signature,
            };
            wx.config({
                beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
                debug: false, // true开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: this.config.appId, // 必填,企业微信的corpID
                timestamp: this.config.timestamp, // 必填,生成签名的时间戳
                nonceStr: this.config.nonceStr, // 必填,生成签名的随机串
                signature: this.config.signature, // 必填,签名,见附录1
                jsApiList: ['uploadImage', 'getLocalImgData', 'scanQRCode', 'chooseImage'], //必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });
        }
    });
},

3.点击拍照按钮,调用手机照相机,拿到本地照片,上传到微信服务器,区分苹果安卓

  • 参考文档:获取本地图片接口,拍照或从手机相册中选图接口,上传图片接口https://work.weixin.qq.com/api/doc/90000/90136/90495
//拍照
takePhoto() {
    let that = this;
    wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有'album', 'camera'
        defaultCameraMode: 'front', //表示进入拍照界面的默认模式,目前有normal与batch两种选择,normal表示普通单拍模式,batch表示连拍模式,不传该参数则为normal模式。(注:用户进入拍照界面仍然可自由切换两种模式)
        isSaveToAlbum: 0, //整型值,0表示拍照时不保存到系统相册,1表示自动保存,默认值是1
        success: function (res) {
            var androidId = res.localIds[res.localIds.length - 1];
            var iosId;
            var localId = res.localIds[res.localIds.length - 1];
            if (window.__wxjs_is_wkwebview) {
                //判断ios是不是用的 wkwebview 内核
                wx.getLocalImgData({
                    //循环调用 getLocalImgData
                    localId: localId,
                    // 图片的localID
                    success: function (res) {
                        var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
                        localData = localData.replace('jgp', 'jpeg'); //iOS 系统里面得到的数据,类型为 image/jgp,因此需要替换一下
                        iosId = localData;
                        that.pic = iosId;
                        that.noPic = false;
                    },
                    fail: function (res) {
                        alert('res');
                    },
                });
            } else {
                //如果不是用的wkwebview内核或者是用的安卓系统
                that.pic = androidId;
                that.noPic = false;
            }
            //上传图片到微信服务器
            wx.uploadImage({
                localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得
                isShowProgressTips: 1, // 默认为1,显示进度提示
                success: function (res) {
                    //因这里只保存一张所以直接赋值,多张请自行处理为字符串
                    that.serverId = res.serverId; // 返回图片的服务器端ID,即素材的media_id
                },
            });
        },
        error: function (res) {
            if (res.errMsg.indexOf('function_not_exist') > 0) {
                this.$message.error('版本过低请升级', '1', 'error.gif');
                return false;
            }
        },
    });
},

完整代码:




你可能感兴趣的:(wx)