- 功能说明
给公司的企业号其中一个页面添加上传图片功能。通过使用微信JSSDK，来实现调用微信客户端以获取一张照片或图片，并上传所选图片到后台服务器。
语言：Asp.net
第一步，引入微信JSSDK文件，<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>。目前最高1.6.0，但是后面说的问题依然存在。
第二步，注册要使用的接口，见 https://work.weixin.qq.com/api/doc#90000/90136/90495
//获取注册接口，参数请查看wx.config的说明 https://work.weixin.qq.com/api/doc#90000/90136/90515 $.ajax({ type: "GET", dataType: "json", url: "/WeixinCorp/WXCorpJSSDK.ashx", data: { "url": window.location.href }, success: function(json) { if (json.result) { wx.config({ debug: false, appId: json.appId, timestamp: json.timestamp, nonceStr: json.nonceStr, signature: json.signature, //注册要使用的3个接口 jsApiList: [ 'chooseImage','getLocalImgData','uploadImage' ] }); } else { alert("ajax err"); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } })
第三步，在wx.ready中注册微信JSSDK初始化后要用到的功能。
wx.ready(function() { document.querySelector('#btnChooseImage').onclick = function() { wx.chooseImage({ count: 1, //最多上传一张 sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function (res) { if (res) { //此功能只是为了在手机端上直接显示图片用，看情况使用 wx.getLocalImgData({ localId: res.localIds[0], // 图片的localID success: function (src) { let prefix = 'base64,'; let index = src.localData.indexOf(prefix); let actData = src.localData; //IOS版的浏览器内核返回的本地数据自带了src需要的前缀，而Android没有，所以分开处理 if (index > -1) { document.getElementById("incidentImg").src = actData; } else { document.getElementById("incidentImg").src = "data:image/jpg;base64," + actData; } } }); //上传图片到微信服务器，并在Img标签的title属性中保存此图片在微信服务器上的ID wx.uploadImage({ localId: res.localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得 isShowProgressTips: 1, // 默认为1，显示进度提示 success: function (ser) { if (ser.serverId != null) { document.getElementById("incidentImg").title = ser.serverId + ".jpg"; // 保存图片的服务器端ID到图片显示标签的title属性 } } }); } else { alert("上传失败"); } } }); }; }); wx.error(function(res) { alert("wx.error:" + res.errMsg); });
第四步，通过AJAX上传文件。原先是直接上传BASE64的数据，后面改的是上传通过wx.uploadImage获得的图片的serverID来实现。
下载文件
var newid = Guid.NewGuid(); string serverPath = HttpContext.Current.Request.MapPath("/Up_Files/") + newid + ".jpg"; DownLoadFile(前台得到的微信服务器的图片ID, serverPath);
下载方法, 首先获得AccessToken, Get方法：https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=你的企业ID&corpsecret=你的企业应用密文
public bool DownLoadFile(string fileID, string serverPath) { try { string accessToken = 得到的AccessToken; string getUrl = $"https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token={accessToken}&media_id={fileID}"; var client = new WebClient(); client.DownloadFile(getUrl, serverPath); return true; } catch (Exception ex) { LogTextHelper.Error(ex.Message); return false; } }
- 故障说明
JSSDK的wx.getLocalImgData方法获得的BASE64图片数据，ANDROID没有“data:image...base64,”的前缀，且在后台无法解码，但是IOS的可以。IOS返回的数据虽然有前缀，但是返回的图片格式有时是错误的,尤其jpg文件经常显示为jgp，还要在后端特别处理。所以通过上传getLocalImgData获得的BASE64的数据因为兼容性问题，很难处理。
- 故障解决
由于选择的是图片，所以在前后端强制把其当做JPG图片处理。由前端上传SERVERID，后端再通过微信接口取得图片下载地址，直接下载到服务器。
来源：博客园
作者：^陆海空$
链接：https://www.cnblogs.com/hughlhk/p/11571660.html