vant框架上传组件---上传身份证两面图片需求并且压缩图片质量，非压缩长宽——商城项目

场景

1.vant框架上传组件—上传身份证两面图片需求并且压缩图片质量，非压缩长宽——商城项目
2.压缩图片质量大小——
3.压缩逻辑因为是正反两面单独压缩执行，所以我这里使用 Promise.all异步压缩完成后调用后台接口传递base64

前端代码

DOM

<template>
    <div id="shop_address_edit">
      <van-address-edit
        show-set-default
        :area-list="areaList"
        @save="onSave"
        @change-default="changeM"
        :address-info="address"
      />

      <!--身份证上传-->
      <div id="uploaderID">
        <div class="uploaderBox">
          <van-uploader
            v-model="sfzfileListzm"
            multiple
            :max-count="1"
            @delete="deleteAxiosimg"
            upload-text="身份证正面"
          />
        </div>
        <div class="uploaderBox">
          <van-uploader
            v-model="sfzfileListfm"
            multiple
            :max-count="1"
            upload-text="身份证反面"
          />
        </div>
      </div>
    </div>
</template>

js

<script>
  import { AddressEdit  } from 'vant'
  import { Area } from 'vant'
  import Vue from 'vue'
  import axios from "axios"
  import allApi from '../js/request.js'
  import areaList from '../js/area'
  import publicFun from '../js/server.js'
  import { Toast } from 'vant';

  Vue.use(Toast);
  Vue.use(AddressEdit).use(Area);
    export default {
        name: "shop_address-edit",
      data(){
          return{
            areaList,
            address:{},
            sfzfileListzm:[],//身份证正面
            ZMBase64:'',//正面
            sfzfileListfm:[],//身份证反面
            FMBase64:'',//反面
        }
      },
      created(){
        let aid=this.$route.query.aid;
        if(aid){
          this.getAddress();
        }
      },
      methods:{
        /*获取回显*/
        async getAddress(){
           let aid=this.$route.query.aid;
           let self=this;
           await axios.post(allApi.GetAddress,{Data:aid}
            ).then(function (res) {
             var a=res.data.Result;
             let addObj=a.area.split(',');
             let isDef=false;
             if(a.is_default==1){
               isDef=true;
             }
             // self.address={id:a.id,addressDetail:a.address,name:a.accept_name,tel:a.mobile,province:a.address,city:a.address,county:a.address};
             self.address={id:a.id,addressDetail:a.address,name:a.accept_name,tel:a.mobile,province:addObj[0],city:addObj[1],county:addObj[2],isDefault:isDef,areaCode:a.areaCode};
             if(res.data.Result.sfz_zm_Info!==null){
               self.sfzfileListzm=res.data.Result.sfz_zm_Info;//回显已上传身份证正面
             }
             if(res.data.Result.sfz_fm_Info!==null){
               self.sfzfileListfm=res.data.Result.sfz_fm_Info;//回显已上传身份证反面
             }
             // $("input[type='text']").attr('placeholder',addObj[0])
            }).catch(function (res) {
              console.log(res)
            });
          },

        /*保存*/
        onSave(content){
           /*异步压缩执行*/
          let self=this
           Promise.all([this.ZMFile(this.sfzfileListzm), this.FMFile(this.sfzfileListfm)]).then(function (results) {
             console.log('成功')
             self.axiosimg(content)//调用接口
           });
        },
        changeM(index){
          console.log(index)
        },
        /*删除已上传的支付截图*/
        deleteAxiosimg(file){
           console.log('删除已上传的支付截图',file)
        },
        /*保存请求*/
        async axiosimg(content){
          let name=content.name;
          let phone=content.tel;
          let address=content.addressDetail;
          let txtProvince=content.province;
          let txtCity=content.city;
          let txtArea=content.county;
          let isDefault=0;
          if(content.isDefault){
            isDefault=1;
          }
          let aid=this.$route.query.aid;
          let id=this.$route.query.id;
          let my=this.$route.query.my;
          let order_no=this.$route.query.order_no;
          let self=this;
          let ZMBase64=this.ZMBase64;
          let FMBase64=this.FMBase64;
          // console.log(name,phone,txtProvince,txtCity,txtArea,address);
          var area=txtProvince+","+txtCity+","+txtArea;
          if(publicFun.checkAll(name,phone,area,address)){
            await  axios.post(allApi.AddOrUpdateAddresses,{ID:aid,Address:address,Accept_Name:name,Mobile:phone,Area:area,Is_default:isDefault,ZMBase64:ZMBase64,FMBase64:FMBase64}
            ).then(function (res) {
              if(res.data.IsSuccess==true){
                Toast.success('保存成功');
                setTimeout(function () {
                  self.$router.push({path:'/shop_address_list',query:{id:id,my:my,order_no:order_no}});
                },1000)
              }else {
                Toast.fail(res.data.IsSuccess)
              }
            }).catch(function (res) {
              console.log(res)
            });
          }
        },

        /*压缩正面*/
        ZMFile(sfzfileListzm){
            var _this = this;
            return new Promise(function (resolve, reject) {
              /*判断是否有图片或者回显图*/
              if(sfzfileListzm.length>0){
                sfzfileListzm.forEach(function (item,key) {
                  /*判断是否为回显图，ISImage为undefined则为新上传图*/
                  if(item.isImage==undefined){
                    // 选择的文件对象(file里只包含图片的体积，不包含图片的尺寸)
                    var file = item.file;
                    // console.log('key',key);
                    // console.log(file)
                    // 选择的文件是图片
                    if(file.type.indexOf("image") === 0) {
                      // 压缩图片需要的一些元素和对象
                      var reader = new FileReader(),
                        //创建一个img对象
                        img = new Image();
                      reader.readAsDataURL(file);
                      //文件base64化，以便获知图片原始尺寸
                      reader.onload = function(e) {
                        img.src = e.target.result;
                      };
                      // base64地址图片加载完毕后执行
                      img.onload = function () {
                        // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('2d');
                        // 图片原始尺寸
                        var originWidth = this.width;
                        var originHeight = this.height;
                        // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
                        var maxWidth = 600,
                          maxHeight = 600;
                        // 目标尺寸
                        var targetWidth = originWidth,
                          targetHeight = originHeight;
                        // 图片尺寸超过300x300的限制
                        if(originWidth > maxWidth || originHeight > maxHeight) {
                          if(originWidth / originHeight > maxWidth / maxHeight) {
                            // 更宽，按照宽度限定尺寸
                            targetWidth = maxWidth;
                            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                          } else {
                            targetHeight = maxHeight;
                            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                          }
                        }
                        // canvas对图片进行缩放
                        canvas.width = targetWidth;
                        canvas.height = targetHeight;
                        // 清除画布
                        context.clearRect(0, 0, targetWidth, targetHeight);
                        // 图片压缩
                        context.drawImage(img, 0, 0, targetWidth, targetHeight);
                        /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
                        //压缩后的图片转base64 url
                        /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
                         * qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/
                        var ZMnewUrl = canvas.toDataURL('image/jpeg', 0.7);//base64 格式
                        _this.ZMBase64=ZMnewUrl;
                        resolve(//返回写函数里面你要执行的内容
                          console.log('_this.ZMBase64',_this.ZMBase64)
                        )
                      };
                    } else {
                      alert('请上传图片格式');
                    }

                  }else{
                    resolve(//返回写函数里面你要执行的内容
                      console.log('item.url',item.url)
                    )
                  }
                });
              }else{
                resolve(//返回写函数里面你要执行的内容
                  console.log('sfzfileListzm',sfzfileListzm)
                )
              }
            })
        },

        /*压缩反面*/
        FMFile(sfzfileListfm){
          var _this = this;
          return new Promise(function (resolve, reject) {
            /*判断是否有图片或者回显图*/
            if(sfzfileListfm.length>0){
              sfzfileListfm.forEach(function (item,key) {
                /*判断是否为回显图，ISImage为undefined则为新上传图*/
                if(item.isImage==undefined){
                  // 选择的文件对象(file里只包含图片的体积，不包含图片的尺寸)
                  var file = item.file;
                  // console.log('key',key);
                  // console.log(file)
                  // 选择的文件是图片
                  if(file.type.indexOf("image") === 0) {
                    // 压缩图片需要的一些元素和对象
                    var reader = new FileReader(),
                      //创建一个img对象
                      img = new Image();
                    reader.readAsDataURL(file);
                    //文件base64化，以便获知图片原始尺寸
                    reader.onload = function(e) {
                      img.src = e.target.result;
                    };
                    // base64地址图片加载完毕后执行
                    img.onload = function () {
                      // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
                      var canvas = document.createElement('canvas');
                      var context = canvas.getContext('2d');
                      // 图片原始尺寸
                      var originWidth = this.width;
                      var originHeight = this.height;
                      // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
                      var maxWidth = 600,
                        maxHeight = 600;
                      // 目标尺寸
                      var targetWidth = originWidth,
                        targetHeight = originHeight;
                      // 图片尺寸超过300x300的限制
                      if(originWidth > maxWidth || originHeight > maxHeight) {
                        if(originWidth / originHeight > maxWidth / maxHeight) {
                          // 更宽，按照宽度限定尺寸
                          targetWidth = maxWidth;
                          targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                        } else {
                          targetHeight = maxHeight;
                          targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                        }
                      }
                      // canvas对图片进行缩放
                      canvas.width = targetWidth;
                      canvas.height = targetHeight;
                      // 清除画布
                      context.clearRect(0, 0, targetWidth, targetHeight);
                      // 图片压缩
                      context.drawImage(img, 0, 0, targetWidth, targetHeight);
                      /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
                      //压缩后的图片转base64 url
                      /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
                       * qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/
                      var FMnewUrl = canvas.toDataURL('image/jpeg', 0.7);//base64 格式
                      _this.FMBase64=FMnewUrl;
                      resolve(//返回写函数里面你要执行的内容
                        console.log('_this.FMBase64',_this.FMBase64)
                      )
                    };
                  } else {
                    alert('请上传图片格式');
                  }
                }else{
                  resolve(//返回写函数里面你要执行的内容
                    console.log('item.url',item.url)
                  )
                }
              });
            }else{
              resolve(//返回写函数里面你要执行的内容
                console.log('sfzfileListfm',sfzfileListfm)
              )
            }
          });
        },
      },
    }
</script>

css

<style scoped>
  #uploaderID{
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
  }
</style>
<style>
  #uploaderID .uploaderBox{
    width: 50%;
  }
  #uploaderID .van-uploader__preview-image{
    width: 100%!important;
    height: 150px!important;
  }
  #uploaderID .van-uploader__upload{
    width: 100%!important;
    height: 150px!important;
  }
  #uploaderID .van-uploader{
    width: 100%
  }
  #uploaderID .van-uploader__input{
    height: 100%;
    width: 100%;
  }
  #shop_address_edit .van-address-edit__buttons{
    position: absolute;
    bottom: 100px;
    width: 100%;
  }
</style>