微信端调取相册和摄像头，实现图片上传，并上传到本地服务器

2023-11-25 10:00:03

在微信公众号网页开发时，遇到了图片上传的问题，查看了微信的开发者文档，里面的资料比较全。接着我们看一下整个的流程

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

微信端调取相册和摄像头，实现图片上传，并上传到本地服务器

码农公寓

相关文章