微信H5页面调起相册和摄像头，实现图片上传，并上传到本地服务器

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");
    }
})

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("上传失败")
            }
        })        
}