注册登录

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

  • 功能说明

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

计算机