關於微信企業號上傳圖片填坑記錄

• 功能說明

給公司的企業號其中一個頁面添加上傳圖片功能。通過使用微信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，后端再通過微信接口取得圖片下載地址，直接下載到服務器。