vue+vant微信公众号里上传图片

1.引入微信sdk

 1.1安装npm install weixin-js-sdk

 1.2配置sdk

//main.js中

//引入
import wx from 'weixin-js-sdk'
import store from './store'
import axios from 'axios'

//挂载到vue上
Vue.prototype.$http = axios
Vue.prototype.$wx = wx
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

2.调用上传图片 

   //a.vue

   <template>
  <div class="Enterprise">
      <upload
        title="身份证"
        detail="请上传身份证"
        :isidentityUpload=true
        imgNum=1
        :isSubmit="isSubmit"//是否点击确定提交按钮
        :checkImgData="rowData.imgArrA"//回显时的值
        @urlKey="urlKeyA"//返回的keyValue值
      />
      <upload
        title="普通图片"
        detail="请上传图片"
        imgNum=5
        :isSubmit="isSubmit"
        :checkImgData="rowData.imgArrB"
        @urlKey="urlKeyB"
      />
  </div>
</template>

<script>
import upload from "./upload";
import { Button } from 'vant';
export default {
  components: {
    VanButton: Button,
    upload
  },
  data () {
    return {
    
    }
  },
  methods:{

    arrToString(urlKey){
      let arr = []
      if(urlKey&&urlKey.length>0){
        urlKey.map((item)=>{
          arr.push(item.key)
        })
      }
      return arr.join(",")
    },

    urlKeyA(urlKey){
      this.params.imgArrA=this.arrToString(urlKey)
    },
    urlKeyB(urlKey){
      this.params.imgArrB=this.arrToString(urlKey)
    },
    initConfig() {
      let _this = this;
      let url = "";
      // 判断是否是ios微信浏览器
      if (window.__wxjs_is_wkwebview === true) {
        url = this.$store.state.url.split("#")[0];
      } else {
        url = window.location.href.split("#")[0];
      }
      $ajax(
          "/getConfig",//获取配置信息的接口（后端给的）
          {url: url},  //传给后端的data
          "wexin"
        )
        .then(res => {
          // alert(JSON.stringify(res));
          _this.$wx.config({
            debug: false,
            appId: res.data.appid,
            timestamp: res.data.timestamp,
            nonceStr: res.data.nonceStr,
            signature: res.data.signature,
            jsApiList: [
              "chooseImage",
              "previewImage",
              "uploadImage",
              "downloadImage"
            ]
          });
        });
    },
  },
  mounted() {

    this.initConfig();
  },
}
</script>

<style scoped>

</style>

 

//upload.vue

<template>
  <div class="UploadBox">
    <h1>
        <span :class="required?'van-cell--required':''">{{title}}</span>
    </h1>
    <div class="detail">
        <span class="d-left">{{detail}}</span>
        <span class="imgBtn" v-if="previewImage" @click="previewImageBtn">示例图</span>
    </div> 
    <van-row class="uplaodBox" gutter="1">
        <van-row v-if="isidentityUpload">
            <van-col v-for="(item,index) in frontImg" :key="item.key" class="idImageBox" span="12">
                <img :src="item.url|| autoImageUrl" alt="addImage" @click="handlePreviewImage('front',item)">
                <van-icon name="clear" class="clearbtn icon" @click="handleDeleteImage('front',index)"/>
            </van-col>   
            <van-col span="12" class="idImageBox" v-if="frontImg.length<1">
                <img :src="IDFrontImg" alt="" @click="uploadBtn('front',1)">
            </van-col>
           <van-col v-for="(item,index) in backImg" :key="item.key" class="idImageBox" span="12">
                <img :src="item.url|| autoImageUrl" alt="addImage" @click="handlePreviewImage('back',item)">
                <van-icon name="clear" class="clearbtn icon" @click="handleDeleteImage('back',index)"/>
            </van-col> 
            <van-col span="12" class="idImageBox" v-if="backImg.length<1">
                <img :src="IDbackImg" alt="" @click="uploadBtn('back',1)">
            </van-col>
            <van-row class="van-field__error-message" v-if="!(frontImg.length===1&&backImg.length===1)&&required">必传，请上传</van-row>
        </van-row>
        <van-row v-else>
            <van-row>
                <van-col v-for="(item,index) in imgArr" :key="index" class="imageBox">
                    <img :src="item.url|| autoImageUrl" alt="addImage" @click="handlePreviewImage('normal',item)">
                    <van-icon name="clear" class="clearbtn icon" @click="handleDeleteImage('normal',index)"/>
                </van-col>      
                <van-col class="imageBox" v-if="imgArr.length<imgNum">
                    <img :src="uploadImg" alt="" @click="uploadBtn('normal',count)">
                </van-col>
            </van-row>
            <van-row class="van-field__error-message" v-if="imgArr.length===0&&required">必传，请上传</van-row>
        </van-row>
    </van-row>
  
  </div>
</template>

<script>
import { Row, Col ,ImagePreview ,Icon } from 'vant';
export default {
  name: 'Upload',
  components: {
    VanRow: Row,
    VanCol: Col,
    VanImagePreview: ImagePreview,
    VanIcon: Icon,
  },
props:['title','detail','isidentityUpload','required','isSubmit','imgNum','checkImgData','checkIdImgData','previewImage'],
  data () {
    return {
        IDFrontImg:require('@/assets/images/IDfront.png'),
        IDbackImg:require('@/assets/images/IDback.png'),
        uploadImg:require('@/assets/images/uploadImg.png'),
        imgArr:[],
        frontImg:[],
        backImg:[],
        isFirst:true,
        count:this.imgNum,
    }
  },
  watch:{
      isSubmit:function(val,oldVal){
          let arr = []
          if(this.isidentityUpload){//身份
              if(this.frontImg[0]){
                arr[0]=this.frontImg[0]
              }
              if(this.backImg[0]){
                arr[1]=this.backImg[0]
              }
          }else{
              arr = this.imgArr
          }
        this.$emit("urlKey",arr)
      },
       checkImgData:function(val,oldVal){
           if(this.isFirst){
            if(this.isidentityUpload){
                if(val&&val.length===2){
                this.frontImg.push(val[0])
                this.backImg.push(val[1])
                }
            }else{
                this.imgArr=this.checkImgData||[]
                this.count = this.count -this.checkImgData.length
            }
            this.isFirst=false
           }
      },
  },
  methods:{
    previewImageBtn(){
        ImagePreview([]);
    },
  
    // 删除图片
    handleDeleteImage(key,index) {
        if(key==="normal"){
            this.imgArr.splice(index,1);
        }else if(key==="front"){
            this.frontImg.splice(index,1)
        }else if(key==="back"){
            this.backImg.splice(index,1)
        }
        this.count = this.count + 1;
    },
    // 图片预览
    handlePreviewImage (key,item) {
        let urls = null
        if(key==="normal"){
            urls=this.imgArr
        }else if(key==="front"){
            urls=this.frontImg
        }else if(key==="back"){
            urls=this.backImg
        }
        self.$wx.previewImage({
            current: item,
            urls: urls
        })
    },
    //上传图片
    handleUpload (localIds,key) {
      let _this = this
      let i = 0;
      let length = localIds.length
       function upload() {
        _this.$wx.uploadImage({
          localId: localIds[i],
          success: res => {
            _this.postRequest(
                "/oss/uploadImgForWechat",
                {mediaId: res.serverId},"default")
              .then(res1 => {
               if(key==="normal"){
                    _this.imgArr.push({
                        key: res1.data.key,
                        url: res1.data.url
                    });
                }else if(key==="front"){
                    _this.frontImg.push({
                        key: res1.data.key,
                        url: res1.data.url
                    });
                }else if(key==="back"){
                    _this.backImg.push({
                        key: res1.data.key,
                        url: res1.data.url
                    });
                }
                this.count = this.count - 1;
              });
            i += 1;
            if (i < length) {
              upload();
            }
          },
          fail: error => {}
        });
      }
      upload();
    },
    uploadBtn (key,num) {
      let _this = this
      let count = _this.count
      if (key=='normal'){
          count = 5-this.imgArr.length
      }
      _this.$wx.chooseImage({
        count: count, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          const localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          _this.handleUpload(localIds,key)
        },
        fail: (error) => {
          
        }
      })
    },
  },
  mounted(){

  }
}
</script>

<style scoped>
    .Upload{
        padding:0 0.3rem;
        border-top:0.2rem solid #F5F5F5 
    }
    h1{
        height: 0.8rem;
        line-height: 0.9rem;
        font-size: 0.3rem;
    }
    .detail{
        font-size: 0.22rem;
      
    }
    .d-left{
        color:#999999;
    }
    .imgBtn{
        color: #CA223E;
    }
    .uplaodBox{
        /* height: 1.86rem; */
        /* padding:0.3rem 0; */
        padding-bottom: 0.3rem;
    }
    .idImageBox{
        width: 2.8rem;
        height: 1.87rem;
        margin: 0.3rem;
        margin-left: 0;
        margin-right: 0.6rem;
    }
    .idImageBox img{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .idImageBox .clearbtn{
        position:relative;
        right: -2.65rem;
        top:-2.08rem;
    }
    .imageBox{
        width: 1.52rem;
        height: 1.52rem;
        margin: 0.3rem 0.6rem 0 0;
    }
    .imageBox img{
        width: 100%;
        height: 100%;
        position: relative;
        
    }
    .imageBox .clearbtn{
        position:relative;
        right: -1.38rem;
        top:-1.70rem;
    }
    .icon {
        width: .5rem;
        height: .5rem;
    }
    .van-cell--required::after {
        content: '*';
        position: absolute;
        font-size: 14px;
        color: #f44;
    }
    .van-cell--required::before {
        display: none;
    }
    .van-field__error-message{
        text-align: center
    }
    .hidden{
        display: none;
    }

</style>