需要引入微信sdk来调取微信照相机
安装微信sdk
npm install weixin-js-sdk
该项目使用element框架
在main.js文件中 引入微信sdk
// 引入微信sdk
import wx from 'weixin-js-sdk'
Vue.prototype.wx = wx
// 引入路由
新建vue文件,复制一下代码
html结构
<template>
<div>
<!-- 拍照 -->
<el-row :gutter="20" style="margin: 0;padding:0">
<el-col :span="12" style="padding-left: 0;padding-right:0">
<ul class="take" @click="take(1)">
<img src="@/assets/img/take.png" class="avatar" alt="" v-if="imageUrl == ''">
<img :src="imageUrl" class="avatar" v-else/>
</ul>
</el-col>
<el-col :span="12" style="padding-left: 0;padding-right: 0">
<ul class="take" @click="take(2)">
<img src="@/assets/img/take2.png" class="avatar" v-if="imageUrl2 == ''" />
<img :src="imageUrl2" class="avatar" v-else/>
</ul>
</el-col>
</el-row>
<!-- <p style="color:"> 点击图片拍照</p> -->
</div>
</template>
js部分
<script>
import qs from 'qs';
export default {
data() {
return {
imageUrl:'',//图片上传网址
imageUrl2:''
};
},
methods: {
take(index) {
var url = window.location.href;
var urls = url.substr(0, url.indexOf("#"));
var then = this;
this.$axios.get("http://192.168.124.7:8090/wechat/getJsSdk?url=" + url, { withCredentials: true }).then(res => {
then.wx.config({
debug: false, // 开启调试模式,
appId: res.data.data.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.data.signature, // 必填,签名,见附录1
jsApiList: [
"chooseImage",
"getLocalImgData",
"previewImage",
"uploadImage",
"downloadImage"
]
});
then.takePicture(index);
});
},
// 调取照相机
takePicture(index) {
var then = this;
this.wx.chooseImage({
count: 1, // 默认9
sizeType: ["original"], // 可以指定是原图还是压缩图,默认二者都有
// "album",
sourceType: ["camera"], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
then.wxgetLocalImgData(localIds,index);
}
});
},
// 获取本地图片接口
wxgetLocalImgData(num,index) {
var then = this;
this.wx.getLocalImgData({
localId: num[0], // 图片的localID
success: function(res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
if (localData.indexOf('data:image') != 0) {
//判断是否有这样的头部
localData = 'data:image/jpeg;base64,' + localData
}
localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
then.$axios.post("http://192.168.124.7:8090/base64Upload",
then.qs.stringify({
base64Data: localData,
}),{ withCredentials: true }).then(res=>{
console.log(8888,res)
// switch 判断
let url = "http://192.168.124.7:8090"+res.data.data;
switch(index){
case 1 :
then.imageUrl = url
break;
case 2 :
then.imageUrl2 = url
break;
default :
}
var image = then.imageUrl.split("http://192.168.124.7:8090")[1]
var image2 = then.imageUrl2.split("http://192.168.124.7:8090")[1]
const info = {
imageUrl: image,
imageUrl2: image2,
};
localStorage.setItem('img', JSON.stringify(info));
})
},
fail: function(res) {
alert("显示失败");
}
});
}
}
};
</script>
样式
<style scoped lang="scss">
.take{
width: 9.5rem;
height: 6rem;
margin-top: 1.5rem;
img{
width: 100%;
height: 100%;
}
}
p{
margin-top: 1rem;
}
</style>