vue 项目，微信拍照上传多张照片

需要引入微信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>