vue调微信相机，拍照片上传，本地长传微信路径下的图片
项目需求中，需要去掉微信的相机，进行拍照上传，下面是我的一些具体实现代码。
重点：1. 需要真机测试，2.域名需要提前去做绑定。
- 需要引入微信外连
在index.html中引入。
- 签名效验。
把当前项目地址（url）截取下来当作参数去掉后端给的接口。
// 调微信接口
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() {}
});
})
},
具体的逻辑就是这些，根据自己需求而定。加油。