vue调微信相机，拍照片上传，本地长传微信路径下的图片

项目需求中，需要去掉微信的相机，进行拍照上传，下面是我的一些具体实现代码。
重点：1. 需要真机测试，2.域名需要提前去做绑定。

1. 需要引入微信外连
   在index.html中引入。
   <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
2. 签名效验。
   把当前项目地址（url）截取下来当作参数去掉后端给的接口。

3.微信测试接口

https://www.weixinsxy.com/jssdk/

 // 调微信接口
            getwechdata(){
                let url = window.location.href.split('#')[0];
                this.axios.post(this.basURL.votUrl+'/home/getWx',{
                    "data":{
                        "url":url,
                        },
                    "token": this.$store.state.token,
                }).then(res=>{
                    if(res.data.errorinfo == null){
                        this.sellq = res.data.data;
                        wx.config({
                                debug:false, // 因为在手机上测试没法打印，当debug为true时，所有的返回值都会在手机上alert出来
                                appId:this.sellq.appId, // 必填，公众号唯一标识
                                timestamp:this.sellq.timestamp, // 必填，生成签名的时间戳
                                nonceStr:this.sellq.nonceStr, // 必填，生成签名的随机串
                                signature:this.sellq.signature,// 必填，签名
                                jsApiList: [
                                    'checkJsApi',
                                    'chooseImage',
                                    'uploadImage',
                                    'downloadImage',
                                    'previewImage'
                                ] // 必填，需要使用的JS接口列表，需要用到什么接口就去开发者文档查看相应的字段名

                        });
                            wx.error(function(res){
                                // alert("签名失败");
                                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                            });
                            wx.ready(function(res){
                                console.log('签名成功');
                                
                            })
                        // console.log(this.sellq)
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },

签名成功之后就可以调相机了。下面分为俩段，一段是拍照上传，另一段是相册中选取，都做的有注释

 // 拍照
        upcame(){
          let that = this;
          that.changeimage = false;
          wx.ready(function(){   // 成功
                wx.chooseImage({
                    count: 1, // 最多可以选择的图片张数，默认9
                    sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
                    sourceType: ['camera'], // album 从相册选图，camera 使用相机，默认二者都有
                    success: function (res) {
                       var localId = res.localIds.pop(); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                         if(window.wxjs_is_wkwebview){
                            if(window.wxjs_is_wkwebview == true){
                                wx.getLocalImgData({
                                    localId: localId, // 图片的localID
                                    success: function (res) {
                                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                    var box = document.getElementById("stroeImg");
                                    box.innerHTML = "";
                                    var img = document.createElement("img");
                                    img.src = localData;
                                    that.storeImage = localData;
                                    img.setAttribute("class","imgSize")
                                    box.appendChild(img);
                                    }
                                });
                                }else{
                                var box = document.getElementById("stroeImg");
                                box.innerHTML = "";
                                var img = document.createElement("img");
                                img.src = localId;
                                that.storeImage = localId;
                                img.setAttribute("class","imgSize")
                                box.appendChild(img);
                            }
                        }else{
                            var box = document.getElementById("stroeImg");
                            box.innerHTML = "";
                            var img = document.createElement("img");
                            img.src = localId;
                            that.storeImage = localId;
                            img.setAttribute("class","imgSize")
                            box.appendChild(img);
                        }
                        wx.uploadImage({
                            localId:localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                            let serverId = res.serverId; // 返回图片的服务器端ID
                            // 可以将serverId传给后台，用于存放在自己服务器上
                            let data = {
                                        "data":{
                                            "type":2,
                                            "serverID":serverId,
                                            "key":that.userId,
                                        },
                                        "token": that.token,
                                    };
                            // 可以将serverId传给后台，用于存放在自己服务器上
                            that.axios.post(that.basURL.votUrl+'/ReportOrder/saveServerID',data).then(res=>{
                                    if(res.data.errorinfo == null){
                                        Toast("更换头像成功!");
                                        that.getData();
                                        }else{
                                        Toast(res.data.errorinfo.errormessage);
                                    }
                             })
                            }
                        });
                    },
                    fail: function(res) { // 失败
                          Toast(res)
                    },
                    complete: function() {

                    } //接口调用完成时执行的回调函数，无论成功或失败都会执行。
                });
          })
        },
        //相册选取
        upimage(){
               let that = this;
               that.changeimage = false;    // 点击查看头像关闭选项
               wx.ready(function(){
                wx.chooseImage({
                    count: 1, // 最多可以选择的图片张数，默认9
                    sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
                    sourceType: ['album'], // album 从相册选图，camera 使用相机，默认二者都有
                    success: function (res) {
                        var localId = res.localIds.pop(); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                          if(window.wxjs_is_wkwebview == true){
                                wx.getLocalImgData({
                                    localId: localId, // 图片的localID
                                    success: function (res) {
                                        var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                        var box = document.getElementById("stroeImg");
                                        box.innerHTML = "";
                                        var img = document.createElement("img");
                                        img.src = localData;
                                        that.storeImage = localData;
                                        img.setAttribute("class","imgSize")
                                        box.appendChild(img);
                                    }
                                });
                            }else{
                                var box = document.getElementById("stroeImg");
                                box.innerHTML = "";
                                var img = document.createElement("img");
                                img.src = localId;
                                that.storeImage = localId;
                                img.setAttribute("class","imgSize")
                                box.appendChild(img);
                            }
                       wx.uploadImage({
                            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                            let serverId = res.serverId; // 返回图片的服务器端ID
                            // 可以将serverId传给后台，用于存放在自己服务器上
                            that.axios.post(that.basURL.votUrl+'/ReportOrder/saveServerID',{
                                        "data":{
                                            "type":2,
                                            "serverID":serverId,
                                            "key":that.userId,
                                        },
                                        "token":that.token,
                                    }).then(res=>{
                                    if(res.data.errorinfo == null){
                                          Toast("更换头像成功!");
                                          that.getData();
                                        }else{
                                          Toast(res.data.errorinfo.errormessage);
                                       }
                                 })
                            }
                        });
                    },
                    fail: function(res) {
                         Toast(res)
                    },
                    complete: function() {}
                });
            })
          },

具体的逻辑就是这些，根据自己需求而定。加油。