微信公眾號-上傳圖片順便轉base64

拍照或從手機相冊中選圖接口,這個接口會返回圖片的本地ID是上傳圖片或獲取base64圖的關鍵。值得注意的地方是在調取wx.getLocalImgData接口時，其返回的圖片路徑，安卓手機上會默認不帶`data:image/jpeg;base64,`頭部，所以在掉你后台接口時可能會報錯，導致不能上傳；而IOS則是返回的頭部是一個不常見的格式jgp，為了兼容手機能夠識別該圖片需要將jgp替換為jpeg等常見格式。

    wx.chooseImage({
        count: 1,//選擇圖片的數量限制
        sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
        sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
        success: function(res) {
            console.log(JSON.stringify(res))
            var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片
             //獲取圖片的寬高
            wx.getLocalImgData({
                localId: localIds[0],//圖片的本地ID
                success: function (res) {
                    var localData = res.localData;
                    if (localData.indexOf('data:image') != 0) {                       
                            //判斷是否有這樣的頭部                                               
                             localData = 'data:image/jpeg;base64,' +  localData                    
                     }                    
                    localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
                    //將base64圖片路徑傳給后台然后返回我們一個全域名路徑的圖片，用於其它操作
　　　　　　　　　　　　$.ajax({
                        type: 'POST',
                        url: globalObj.url + '/api/User/uploads',
                        header: {
                            //請求頭和ajax寫法一樣
                            "Content-Type": "application/x-www-form-urlencoded"
                        },
                        data: {
                            image:localData
                        },
                        success: function(res) {
                            imgsrchtml = '<div class="img _img">' +
                                '<img src=' + res.images + ' >' +
                                '<span class="del active">X</span>' +
                                '</div>'
                            console.log(res.images)
                            _this.before(imgsrchtml)
                            $('.del').on('tap', function() {
                                $(this).parent().remove()
                            })
                        },
                        error: function(error) {
                        }
                    })
                }
            });
        }
    });

微信JS_SDK還提供了上傳圖片和下載圖片的接口

上傳：上傳圖片有效期3天，可用微信多媒體接口下載圖片到自己的服務器，此處獲得的 serverId 即 media_id。

wx.uploadImage({
    localId: '', // 需要上傳的圖片的本地ID，由chooseImage接口獲得
    isShowProgressTips: 1, // 默認為1，顯示進度提示
    success: function (res) {
        var serverId = res.serverId; // 返回圖片的服務器端ID
    }
});

下載圖片的接口：

wx.downloadImage({
    serverId: '', // 需要下載的圖片的服務器端ID，由uploadImage接口獲得
    isShowProgressTips: 1, // 默認為1，顯示進度提示
    success: function (res) {
        var localId = res.localId; // 返回圖片下載后的本地ID
    }
});