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

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

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

 

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

上一篇:微信小程序多列选择器之range-key


下一篇:微信小程序项目 配置开发环境及全面了解小程序