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

前言

---

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

概述

---

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

实现图像接口

---

HTML 前端部份

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

上传

···

JavaScript JS 部份

这个地方我们单独写了一个 wx.config 通用文件，主要放的就是一些回调方法，可以看到我们上边并没有 ready 成功接口和 error 失败接口，因为都放到了 wx.config 里边

首先我们调用 chooseImage 因为我们是点击图片才触发这个方法，所以还要写一个点击事件，记得要写到 wx.ready 回调方法里边!!这样就获取到了安卓显示图片的内容

wx.ready(function(){

//给上传图标绑定 onclick 事件

$(“#uploadfile”).click(function(){

// 调取接口

wx.chooseImage({

count: 1, // 默认9

sizeType: [‘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], // 图片的localID

success: 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, // 默认9

sizeType: [‘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], // 图片的localID

success: function(res) {

var imageBase64 = res.localData;

var html = document.createElement(‘div’);

html.innerHTML = ‘’;

picCheck.appendChild(html);

}

});

}else{

var imageBase64 = res.localIds[0];

var html = document.createElement(‘div’);

html.innerHTML = ‘’;

picCheck.appendChild(html);

}

}

});

})

});

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

最后

小编这些年深知大多数初中级工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Java全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你需要这些资料，⬅专栏获取
自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

因此我收集整理了一份《2024年Java全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-gfmYSZmg-1719600858932)]

[外链图片转存中…(img-6DRVbhoz-1719600858933)]

[外链图片转存中…(img-mmOgEFQX-1719600858933)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你需要这些资料，⬅专栏获取