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>