微信图片上传方法总结

1.页面样式和需要加载微信js

<p class="head_portrait"><img src="gv/mine/images/img_info.png" alt="" id="chooseImage1"></p>

<script type="text/javascript" src="js/jweixin-1.2.0.js"></script>

2.js代码

/** ******************获取微信配置数据********************** */
      var oldNet = '';
      var newNet = '';// 记录网络状态
      var configData;
      $.ajax({
            url: Url + 'weChat/getSignatureInfo',//调用微信的接口
            data: {pageUrl: location.href.split('#')[0]},
             success: function (data) {
              configData = {
                    debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appid, // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名，见附录1
                    jsApiList : [ 'chooseImage', 'previewImage','uploadImage', 'downloadImage' ]
                    // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                };
               wx.config(configData);
               wx.ready(function () {
                    wx.getNetworkType({
                        success: function (res) {
                          oldNet = res.networkType; // 返回网络类型2g，3g，4g，wifi
                        }
                      });
                    // 拍照选图片一
                    document.querySelector('.head_portrait').onclick = function (){
                      var img1=$('#chooseImage1');
                        wx.chooseImage({
                            count: 1, // 默认9
                            sourceType: ['album', 'camera'],
                            success: function (res) {
                                var imgLocalId = res.localIds;//本地地址
                                if(!imgLocalId){
                                  fnPicInfo('',imgLocalId,'choose','fb',JSON.stringify(res));
}
                                wx.uploadImage({
                                    localId: imgLocalId[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                                    isShowProgressTips: 1, // 默认为1，显示进度提示
                                    success: function (res) {
                                        if(res.serverId.indexOf("wxLocalResource://")>=0){
                                            mui.alert('',"图片上传失败，请重新上传！",'');
                                            return;
                                        }
                                         mediaId = res.serverId;
                                        if(!mediaId){
                                          fnPicInfo(mediaId,imgLocalId,'upload','fb',JSON.stringify(res));
                                        } 
                                        img1.attr('src',imgLocalId);
                                        mediaId1=mediaId;
                                        localId1=imgLocalId;
                                    },
                                    fail: function(re){
                                      wx.getNetworkType({
                                      success: function (res) {
                                        $('.hidden_word1').show();
                                        newNet = res.networkType; // 返回网络类型2g，3g，4g，wifi
                                        fnPicInfo('','','upload','fb',re);
                                      }
                                    });
                                    }
                                });
                            },
                          fail: function(re){
                            alert(JSON.stringify(re));
                            wx.getNetworkType({
                          success: function (res) {
                            $('.hidden_word1').show();
                            newNet = res.networkType; // 返回网络类型2g，3g，4g，wifi
                            fnPicInfo('','','choose','fb',re);
                          }
                        });
                          }
                        });
                    };
　　　　　　　　　　　　//拍照选择图片二
                    document.querySelector('#chooseImage2').onclick = function (){
                      var img2=$('#chooseImage2');
                        wx.chooseImage({
                            count: 1, // 默认9
                            sourceType: ['album', 'camera'],
                            success: function (res) {
                                var imgLocalId = res.localIds;
                                if(!imgLocalId){
                                  fnPicInfo('',imgLocalId,'choose','fb',JSON.stringify(res));
                                  
                                }
                                wx.uploadImage({
                                    localId: imgLocalId[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                                    isShowProgressTips: 1, // 默认为1，显示进度提示
                                    success: function (res) {
                                        if(res.serverId.indexOf("wxLocalResource://")>=0){
                                            mui.alert('',"图片上传失败，请重新上传！",'');
                                            return;
                                        }
                                         mediaId = res.serverId;
                                        if(!mediaId){
                                          fnPicInfo(mediaId,imgLocalId,'upload','fb',JSON.stringify(res));
                                        } 
                                        img2.attr('src',imgLocalId);
                                        mediaId2=mediaId;
                                        localId2=imgLocalId;
                                    },
                                    fail: function(re){
                                      wx.getNetworkType({
                                      success: function (res) {
                                        $('.hidden_word2').show();
                                        newNet = res.networkType; // 返回网络类型2g，3g，4g，wifi
                                        fnPicInfo('','','upload','fb',re);
                                      }
                                    });
                                    }
                                });
                            },
                          fail: function(re){
                            alert(JSON.stringify(re));
                            wx.getNetworkType({
                          success: function (res) {
                            $('.hidden_word2').show();
                            newNet = res.networkType; // 返回网络类型2g，3g，4g，wifi
                            fnPicInfo('','','choose','fb',re);
                          }
                        });
                          }
                        });
                    };
              })
              
             }
        });
        // 照片信息 返给后台查看信息的
        function fnPicInfo(sId,lId,opType,businessType,remark) {
        remark+="||"+oldNet+"||"+newNet;
          $.ajax({
            url:Url+'maintainCommon/addWXMediaRecord',
            data:{
              serviceId:sId,
              localId:lId,
              clientType:navigator.userAgent,
              opType:opType,
              businessType:businessType,
              remark:remark
            }
          });
        }