微信端調取相冊和攝像頭，實現圖片上傳，並上傳到本地服務器

在微信公眾號網頁開發時，遇到了圖片上傳的問題，查看了微信的開發者文檔，里面的資料比較全。接着我們看一下整個的流程

1、config權限配置

$.ajax({
    url:'wx_getConfig',            
    type:'get',
    dataType:'json',
    async:false,
    success:function(data){
        var appId = data[0].appId;
        var timestamp = data[0].timestamp;
        var nonceStr = data[0].nonceStr;
        var signature = data[0].signature;
        wx.config({  
            debug: false,//調試模式   當為tru時，開啟調試模式 
            appId: appId,  
            timestamp: timestamp.toString(),//簽名時間戳
            nonceStr: nonceStr, //生成簽名的隨機串 
            signature: signature,//簽名                    
            jsApiList: ['chooseImage','uploadImage','getLocalImgData','downloadImage'],
            success:function(){
                alert("配置成功")
            },
            fail:function(){
                alert("配置失敗")
            }
        });  
    },
    error:function(){
        alert("error");
    }
})

這一步，在調試的時候， 會報config:invalid signature，如果出現這個錯誤，建議按一下順序去檢查

1.確認簽名算法正確，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗。
2.確認config中nonceStr（js中駝峰標准大寫S）, timestamp與用以簽名中的對應noncestr, timestamp一致。
3.確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認)，包括'http(s)://'部分，以及'？'后面的GET參數部分,但不包括'#'hash后面的部分。
4.確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
5.確保一定緩存access_token和jsapi_ticket。

2、config配置成功

   當config配置成功后，就會執行ready函數，所有的操作必須等到config配置完成后才會執行，如果是頁面加載就執行的操作，就必須放在ready中執行。如果是在被觸發時執行的操作，則不需要放在ready中

wx.ready(function () {
    // 在這里調用 API
    wx.checkJsApi({
      jsApiList: [
        'chooseImage',
        'uploadImage',
        'getLocalImgData',
        'downloadImage'
      ],
      success: function (res) {
        console.log(JSON.stringify(res));
      }
    });
});

 

3、調取攝像頭和相冊

function takePicture(nums) {  
   wx.chooseImage({  
       count: 1,  
       needResult: 1,  
       sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有  
       sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有  
       success: function (data) {                  
           localIds = data.localIds[0];   // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片                           
           var num1 = nums;
           wxuploadImage(localIds,num1);
           wxgetLocalImgData(localIds,num1);
       },  
       fail: function (res) {            
           alterShowMessage("操作提示", JSON.stringify(res), "1", "確定", "", "", "");  
           }    
       });  
   }  

 

4、上傳到微信服務器

function wxuploadImage(e,num) {
    var $hiddenImg= $(".hiddenImg");
    wx.uploadImage({  
        localId: e, // 需要上傳的圖片的本地ID，由chooseImage接口獲得  
        isShowProgressTips: 1, // 默認為1，顯示進度提示  
        success: function (res) {                                        
            mediaId = res.serverId;                    
            wxdownloadImage(mediaId)
            $($hiddenImg[num]).val(mediaId);          
        },  
        fail: function (error) {  
            picPath = '';  
            localIds = '';  
            alert(Json.stringify(error));          
        }          
    });  
}                     
        

此時的圖片上傳，是將圖片上傳到微信服務器，我們可以根據獲取到的medisId 將圖片下載到本地服務器。

5、獲取本地圖片接口，在本地顯示

function wxgetLocalImgData(e,num){
    var $myimg = $(".myimg");    
    if(window.__wxjs_is_wkwebview){
     wx.getLocalImgData({
         localId: e, // 圖片的localID
         success: function (res) {                    
              var localData = res.localData; // localData是圖片的base64數據，可以用img標簽顯示
              localData = localData.replace('jgp', 'jpeg');//iOS 系統里面得到的數據，類型為 image/jgp,因此需要替換一下                                            
              $($myimg[num]).attr("src", localData);
         },fail:function(res){
          alert("顯示失敗");
         }
     });
    }else{
        $($myimg[num]).attr("src", e);
        
    }
}

此接口僅在 iOS WKWebview 下提供，用於兼容 iOS WKWebview 不支持 localId 直接顯示圖片的問題

6、提交到本地服務器，實現本地上傳

function tijiao(){
    var userInfo = JSON.parse(localStorage.getItem("UserInfoKey"));
    var user = JSON.parse(localStorage.getItem("user"));
    var userId = user.userId;
    var company = userInfo.mainInfo;
    var kfCompanyProvince = userInfo.kfCompanyProvince;
    var kfCompanyCity = userInfo.kfCompanyCity;
    var kfCompanyDistrict = userInfo.kfCompanyDistrict;
    var companyAddress = userInfo.detailAddress;
    var userType = user.userType;
    var userName = userInfo.contacts;
    var principalPhoneCode = userInfo.phone;
    var img1 = $($(".hiddenImg")[0]).val();
    var img3 = $($(".hiddenImg")[1]).val();
    var img5 = $($(".hiddenImg")[2]).val();
    var img6 = $($(".hiddenImg")[3]).val();
    var img7 = $($(".hiddenImg")[4]).val();    
     $.ajax({
            url:'user_uploadInformation',
            data:{
                  "userId":userId,
                  "company":company,
                  "kfCompanyProvince":kfCompanyProvince,
                  "kfCompanyCity":kfCompanyCity,
                  "kfCompanyDistrict":kfCompanyDistrict,
                  "companyAddress":companyAddress,
                  "userType":userType,
                  "userName":userName,
                  "principalPhoneCode":principalPhoneCode,
                  "img1":img1,
                  "img3":img3,
                  "img5":img5,
                  "img6":img6,
                  "img7":img7
            },
            type:'post',
            dataType:'json',
            async:false,
            success:function(data){
                if(data.code == 0){
                    mui.alert("認證失敗，請重新認證")
                }else if(data.code == 1){
                    mui.alert("申請提交成功，請稍后",function(){
                        window.location.href="../../index/carManLookImg.jsp"
                    })
                    
                }
            },
            error:function(data){
                alert("上傳失敗")
            }
        })        
}

7、總結

根據以上的步驟，簡單的調取攝像頭和相冊實現圖片上傳的功能就實現了，其實微信平台的開發者文檔給我們提供了非常詳細的開發者文檔，以后可以一起多研究研究。最后附上微信開發者文檔鏈接https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432