关于微信企业号上传图片填坑记录

  • 功能说明

给公司的企业号其中一个页面添加上传图片功能。通过使用微信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,后端再通过微信接口取得图片下载地址,直接下载到服务器。

关于微信企业号上传图片填坑记录

上一篇:微信小程序之image图片自适应宽度比例显示


下一篇:微信小程序之保存图片到本地授权