企业微信开发：使用 JS-SDK 实现图像接口功能（六）

前言

本文主要是实现图像接口，之前我以为企业微信和微信应该大差不差的，结果这玩意坑还挺多，写篇文章记录一下自己踩过的坑，希望对你们有所帮助！这个地方就不介绍配置 wx.config 了详细请看上一篇文章“企业微信开发：使用 JS-SDK 配置 wx.config 实现屏蔽分享菜单功能（五）”

概述

前一段时间写了一个移动端的微信图像上传，然后最近需求有一个企业微信图像上传，我就寻思应该都是大差不差的，我就去把代码移植过来测试，结果发现这个区别还是有点大的，最主要的不同点还是在于 getLocalImgData 的调用

实现图像接口

HTML 前端部份

这是我准备好的页面，可以直接使用注意里边用到的 js 就好，css 可以自己随便写写。。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>调用企业微信图像上传接口</title><!--上传图片css--><link rel="stylesheet" href="../css/style.css" />
</head>
<body><header class="upload-hedaer"><a href="javaScript:history.back(-1)" class="upload-fh"></a><div>上传</div><div>···</div></header><section class="upload-section"><article class="upload-piclist"><div class="upload-file" id="uploadfile"></div></article></section><script src="../js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script><script src="../js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/wxconfig.js" type="text/javascript" charset="utf-8"></script>
</body>
<script type="text/javascript">/** 这个地方我们只需要在要使用的页面引用就 OK1.chooseImage：和拍照或从手机相册中选图接口2.getLocalImgData：获取本地图片接口**/ wx.config({debug: true, // 生产环境需要关闭debug模式appId: "[[${appId}]]", // appID = corpID 通过微信服务号/企业微信后台查看timestamp: "[[${timestamp}]]", // 生成签名的时间戳nonceStr: "[[${nonceStr}]]", // 生成签名的随机字符串signature: "[[${signature}]]", // 签名jsApiList: [ // 需要调用的JS接口列表'chooseImage','getLocalImgData']});
</script>
</html>

JavaScript JS 部份

这个地方我们单独写了一个 wx.config 通用文件，主要放的就是一些回调方法，可以看到我们上边并没有 ready 成功接口和 error 失败接口，因为都放到了 wx.config 里边
首先我们调用 chooseImage 因为我们是点击图片才触发这个方法，所以还要写一个点击事件，记得要写到 wx.ready 回调方法里边!!这样就获取到了安卓显示图片的内容

wx.ready(function(){//给上传图标绑定 onclick 事件$("#uploadfile").click(function(){// 调取接口wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有defaultCameraMode: "normal",isSaveToAlbum: 1,success: function(res) {// 这个很重要var localIds = res.localIds;alert("获取到返回的本地 ID ："+localId)}});})
});

这里有一个容易出错的地方，一定要认真地去查看官方文档，不然可能会出现一个问题就是，微信可以上传并显示图片，企业微信可以上传但是不显示图片
企业微信的 getLocalImgData 接口是不支持安卓的！！！微信的可以。。。

所以这个地方我们需要使用 getLocalImgData 来获取 ios 显示内容，在上方我们已经拿到了安卓的图片路径

// 调用本地图片接口
wx.getLocalImgData({localId: res.localIds[0], // 图片的localIDsuccess: function(res) {var imageBase64 = res.localData;alert("获取 ios 显示内容："+imageBase64)}
});

最后添加一个获取手机型号的 JS 的验证用来区分是苹果还是安卓

var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

完整示例

最后贴上完整的代码和运行截图！！！上方文件不附带样式，只做参考！！

wx.ready(function(){//给上传图标绑定 onclick 事件$("#uploadfile").click(function(){// 调取接口wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有defaultCameraMode: "normal",isSaveToAlbum: 1,success: function(res) {var picCheck = document.getElementsByClassName('upload-piclist')[0];// 判断手机型类型var u = navigator.userAgent;var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if(isiOS){// 调用本地图片接口wx.getLocalImgData({localId: res.localIds[0], // 图片的localIDsuccess: function(res) {var imageBase64 = res.localData;var html = document.createElement('div');html.innerHTML = '<img id="image" src=' + imageBase64 + ' alt="">';picCheck.appendChild(html);}});}else{var imageBase64 = res.localIds[0];var html = document.createElement('div');html.innerHTML = '<img id="image" src=' + imageBase64 + ' alt="">';picCheck.appendChild(html);}}});})
});

最后欢迎各位留言指教！！！