天天看點

使用微信SDK上傳圖檔後空白問題

1.引用js

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2.初始化

wx.config({

        debug: false, // 開啟調試模式,調用的所有api的傳回值會在用戶端alert出來,若要檢視傳入的參數,可以在pc端打開,參數資訊會通過log打出,僅在pc端時才會列印。

        appId: "<%=appId %>", // 必填,公衆号的唯一辨別

        timestamp: "<%=timestamp %>", // 必填,生成簽名的時間戳

        nonceStr: '<%=noncestr %>', // 必填,生成簽名的随機串

        signature: '<%=signature %>',// 必填,簽名,見附錄1

        jsApiList: ['chooseImage','previewImage','uploadImage','getLocalImgData','downloadImage'] // 必填,需要使用的JS接口清單,所有JS接口清單見附錄2

    });

3.上傳圖檔設定

wx.chooseImage({

                count: 7-length, // 預設9

                sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有

                sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,預設二者都有

                success: function (res) {

                    var localIds = res.localIds; // 傳回標明照片的本地ID清單,localId可以作為img标簽的src屬性顯示圖檔

                    syncUpload(localIds);    

                }

            });

function syncUpload(localIds) {

           var localId = localIds.pop();

            wx.uploadImage({

                localId: localId,

                isShowProgressTips: 1,

                success: function (res) {

                    var serverId = res.serverId; // 傳回圖檔的伺服器端ID

                    getLocalImgData(localId,serverId);

                    if(localIds.length > 0){

                        syncUpload(localIds);

                    }

                }

            });

     }

//重點(iOS系統和安卓系統分開處理)

function getLocalImgData(localId,serverId){

                    if (window.__wxjs_is_wkwebview){

                            wx.getLocalImgData({

                                localId:localId,

                                success: function (res){

                                    var localData = res.localData; // localData是圖檔的base64資料,可以用img标簽顯示

                                    localData = localData.replace('jgp', 'jpeg');//iOS 系統裡面得到的資料,類型為 image/jgp,是以需要替換一下

                                    $('<li sid="'+serverId+'"><span class="insertimg"  style="background-image: url('+localData+')"></span></li>').insertBefore($(".insertimgbtn").parent());

                                }

                            });

                    }else{   //如果不是用的wkwebview 核心 或者是用的安卓系統 執行下面的xunh

                        $('<li sid="'+serverId+'"><span class="insertimg"  style="background-image: url('+localId+')"></span></li>').insertBefore($(".insertimgbtn").parent());

                    }

     }

繼續閱讀