前端上传图片次数怎么传给后端，如果点击身份证正面，再点击身份证反面上传或者切换其他证件，身份证正面次数清零

Question

前端上传图片次数怎么传给后端，如果点击身份证正面，再点击身份证反面上传或者切换其他证件，身份证正面次数清零

  <li class="common_table_view_cell">
    <div class="fl common_table_fl">证件类型<span @click=quest_box("idtype") class="quest_style" id="idtype"></span></div>
    <div class="fr common_table_fr">
      <span id="idcard" v-model="applicanttype">{{applicant.idtype}}</span>
    </div>
  </li>
  <!-- 身份证 -->
  <div class="imgbox" v-show="applicant.type=='01'">
    <!-- 正面 -->
    <div class="images">
      <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','01','9001',$event)">
      <img @click="allimgup('1','01','9001')" v-bind:src="applicant.photo.type_01[0].photo_url">
    </div>
    <!-- 反面 -->
    <div class="images">
      <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','01','9002',$event)">
      <img @click="allimgup('1','01','9002')" v-bind:src="applicant.photo.type_01[1].photo_url">
    </div>
  </div>
  <!-- 户口本 -->
  <div class="imgbox" v-show="applicant.type=='02'">
    <div class="images">
      <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','02','9001',$event)">
      <img @click="allimgup('1','02','9001')" v-bind:src="applicant.photo.type_02[0].photo_url">
    </div>
  </div>
  <!-- 护照 -->
  <div class="imgbox" v-show="applicant.type=='07'||applicant.type=='51'">
    <div class="images">
      <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','07','9001',$event)">
      <img @click="allimgup('1','07','9001')" v-bind:src="applicant.photo.type_07[0].photo_url">
    </div>
    <div class="images" @click="allimgup('1','07','9002')">
      <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','07','9002',$event)">
      <img @click="allimgup('1','07','9002')" v-bind:src="applicant.photo.type_07[1].photo_url">
    </div>
  </div>
  <!-- 港澳通行证 -->
  <div class="imgbox" v-show="applicant.type=='11'">
    <div class="images">
      <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','11','9001',$event)">
      <img @click="allimgup('1','11','9001')" v-bind:src="applicant.photo.type_11[0].photo_url">
    </div>
    <div class="images">
      <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','11','9002',$event)">
      <img @click="allimgup('1','11','9002')" v-bind:src="applicant.photo.type_11[1].photo_url">
    </div>
  </div>
  <!--     台胞证 -->
  <div class="imgbox" v-show="applicant.type=='12'">
    <div class="images">
      <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','12','9001',$event)">
      <img @click="allimgup('1','12','9001')" v-bind:src="applicant.photo.type_12[0].photo_url">
    </div>
    <div class="images">
      <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','12','9002',$event)">
      <img @click="allimgup('1','12','9002')" v-bind:src="applicant.photo.type_12[1].photo_url">
    </div>
  </div>
  <!--港澳台居民居住证-->
  <div class="imgbox" v-show="applicant.type=='17'">
    <div class="images">
      <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','17','9001',$event)">
      <img @click="allimgup('1','17','9001')" v-bind:src="applicant.photo.type_17[0].photo_url">
    </div>
    <div class="images">
      <input accept="image/*" type="file" name="img" class="appimage" @change="allimgup('1','17','9002',$event)">
      <img @click="allimgup('1','17','9002')" v-bind:src="applicant.photo.type_17[1].photo_url">
    </div>
  </div>

//9238增加证件识别类型
    allimgup: function (up, type, code, files) {
      $('#loadingToast').show();
      imgtype = 1;
      imgidtype = type;
      imgcodenum = code;
      imgup = up;
      switch (up) {
        case "1":
          beneficiarie_no = "";
          break;
        case "2":
          beneficiarie_no = "";
          break;
        case "3":
          beneficiarie_no = vm.beneficiary[0].contacts_no;
          break;
        case "4":
          beneficiarie_no = vm.beneficiary[1].contacts_no;
          break;
        case "5":
          beneficiarie_no = vm.beneficiary[2].contacts_no;
          break;
        case "":
          beneficiarie_no = "";
          break;
      }
      switch (type) {
        case "01":
        case "02":
        case "11":
        case "12":
        case "13":
        case "17":
          switch (code) {
            case "9001":
            case "9010":
            case "9012":
            case "9014":
            case "9016":
              if (beneficiarie_no != "") {
                code = "01";
              }
              is_card_type = "01";
              break;
            case "9002":
            case "9011":
            case "9013":
            case "9015":
            case "9017":
              if (beneficiarie_no != "") {
                code = "02";
              }
              is_card_type = "02";
              break;
          }
          break;
        case "04":
        case "05":
        case "16":
        case "07":
        case "99":
        case "18":
        case "":
          if (beneficiarie_no != "") {
            switch (code) {
              case "9012":
              case "9014":
              case "9016":
                code = "01";
                break;
              case "9013":
              case "9015":
              case "9017":
                code = "02";
                break;
            }
          }
          is_card_type = "";
          break;
      }
      upload_image_param = {
        "mode": mode,
        "token_wt": "e10adc3949ba59abbe56e057f20f883e",
        "order_no": order_no,
        "plan_no": plan_no,
        "beneficiarie_no": beneficiarie_no,
        "type": code,
        "card_type": is_card_type,
        "is_share": "3",
        "id_type": imgidtype
      }
      if (webflag) {
        uploadImg(files, upload_image_param);
      } else {
        wxuploadImg();
      }
    }

    function uploadImg(e, postdata) {
      var file = e.target;
      if (!file.files || !file.files[0]) {
        $('#loadingToast').hide();
        return;
      }
      var imgName = file.files[0].name;
      if (imgName.indexOf("gif") == "-1" && imgName.indexOf("GIF") == "-1" && imgName.indexOf("bmp") == "-1" && imgName
        .indexOf("BMP") == "-1" && imgName.indexOf("PNG") == "-1" && imgName.indexOf("png") == "-1" && imgName.indexOf(
          "jpg") == "-1" && imgName.indexOf("JPG") == "-1" && imgName.indexOf("JPEG") == "-1" && imgName.indexOf(
        "jpeg") == "-1") {
        $('#loadingToast').hide();
        hxui.toast("请上传正确的图片");
        return
      }
      if (file.files[0].size > 10000000) {
        $('#loadingToast').hide();
        $(file).val("");
        hxui.toast("图片过大，请上传10M以下的图片");
        return
      }
      EXIF.getData(file.files[0], function () {
        Orientation = EXIF.getTag(this, 'Orientation');
        return Orientation
      });
      var reader = new FileReader();
      reader.onload = function (evt) {
        ndata = evt.target.result;
        var sendData = ndata.replace("data:image/jpeg;base64,", '');
        compress(ndata, sendData, postdata);
        $(file).val("");
      }
      reader.readAsDataURL(file.files[0]);
    }

    function compress(ndata, sendData, postdata) {
      var img = new Image();
      img.onload = function () {
        var canvas = document.getElementById("imgcanvas");
        var tCanvas = document.getElementById("imgcanva");
        var ctx = canvas.getContext('2d');
        var tctx = tCanvas.getContext('2d');
        var width = img.width;
        var height = img.height;
        var ratio;
        if ((ratio = width * height / 4000000) > 1) {
          ratio = Math.sqrt(ratio);
          width /= ratio;
          height /= ratio;
        } else {
          ratio = 1;
        }
        canvas.width = width;
        canvas.height = height;
        var count;
        if ((count = width * height / 1000000) > 1) {
          count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
          // 计算每块瓦片的宽和高
          var nw = ~~(width / count);
          var nh = ~~(height / count);
          tCanvas.width = nw;
          tCanvas.height = nh;
          for (var i = 0; i < count; i++) {
            for (var j = 0; j < count; j++) {
              tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
              ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
            }
          }
          ndata = canvas.toDataURL("image/jpeg", 0.5);
          sendData = ndata.replace("data:image/jpeg;base64,", '');
        } else {
          sendData = ndata.replace(/^data:image\/(PNG|png|jpg|JPEG|jpeg|bmp|BMP|gif|GIF|JPG);base64,/, "");
        }
        //修复ios上传图片的时候 被旋转的问题
        if (Orientation && Orientation != 1) {
          var imgs = new Image();
          imgs.src = ndata;
          imgs.onload = function () {
            cvs.width = height;
            cvs.height = width;
            var ctxs = cvs.getContext('2d');
            switch (Orientation) {
              case 6: //需要顺时针（向左）90度旋转
                ctxs.rotate(Math.PI / 2);
                ctxs.drawImage(imgs, 0, -height, width, height);
                ndata = cvs.toDataURL("image/jpeg");
                sendData = ndata.replace("data:image/jpeg;base64,", '');
                upload_image_param.img_src = sendData;
                break;
              case 8: //需要逆时针（向右）90度旋转
                ctxs.rotate(3 * Math.PI / 2);
                ctxs.drawImage(imgs, -width, 0, width, height);
                ndata = cvs.toDataURL("image/jpeg");
                sendData = ndata.replace("data:image/jpeg;base64,", '');
                upload_image_param.img_src = sendData;
                break;
              case 3: //需要180度旋转
                ctxs.rotate(Math.PI);
                ctxs.drawImage(imgs, -width, -height, width, height);
                ndata = cvs.toDataURL("image/jpeg");
                sendData = ndata.replace("data:image/jpeg;base64,", '');
                upload_image_param.img_src = sendData;
                break;
            }
            $.ajax({
              type: 'POST',
              url: commonurl + 'upload/photo',
              data: JSON.stringify(postdata),
              timeout: 30000,
              contentType: "application/json",
              async: true,
              dataType: 'json',
              success: function (data) {
                if (data.result_code == "0") {
                  $('#loadingToast').hide();
                  data.wxsrc = ndata;
                  upload_fee(data, upload_image_param.type);
                } else {
                  $('#loadingToast').hide();
                  hxui.toast("图片上传失败请重新上传");
                }
                $('#loadingToast').hide();
              },
              complete: function (XMLHttpRequest, status) {
                if (status == 'timeout') {
                  $('#loadingToast').hide();
                  $("#errInfo").show();
                }
              },
              error: function () {
                $('#loadingToast').hide();
              }
            });
          }
        } else {
          upload_image_param.img_src = sendData;
          $.ajax({
            type: 'POST',
            url: commonurl + 'upload/photo',
            data: JSON.stringify(postdata),
            timeout: 30000,
            contentType: "application/json",
            async: true,
            dataType: 'json',
            success: function (data) {
              if (data.result_code == "0") {
                $('#loadingToast').hide();
                data.wxsrc = ndata;
                upload_fee(data, upload_image_param.type);
              } else {
                $('#loadingToast').hide();
                hxui.toast("图片上传失败请重新上传");
              }
              $('#loadingToast').hide();
            },
            complete: function (XMLHttpRequest, status) {
              if (status == 'timeout') {
                $('#loadingToast').hide();
                $("#errInfo").show();
              }
            },
            error: function () {
              $('#loadingToast').hide();
            }
          });
        }
      }
      img.src = ndata;
      var width = img.width;
      var height = img.height;
    }
    var imgup, imgidtype, imgcodenum, beneficiarie_no; //图片上传类别、图片code、受益人编号、受益人常用联系人编号
    var imgtype; //用于区分上传图片的性质
    //图片上传
    function upload_fee(data) {
      $('#loadingToast').hide();
      if (data.result_code == "0") {
        //9238增加证件识别类型
        var idtype_name = "身份证";
        if (imgtype == 1) {
          var imgsrc = data.wxsrc;
          var idinfo = data.id_card;
          imgUrl(imgidtype, imgcodenum, imgsrc);
          //校验日期是否合法
          if (idinfo) {
            if (idinfo.expiration_date) {
              if (new Date(idinfo.expiration_date) == "Invalid Date") {
                idinfo.expiration_date = "";
              }
            }
            // imgidtype是
            if (imgidtype == "01" || imgidtype == "02" || imgidtype == "11" || imgidtype == "12" || imgidtype == "13" ||
              imgidtype == "17") {
              switch (imgidtype) {
                case "01":
                  idtype_name = "身份证";
                  break;
                case "02":
                  idtype_name = "户口簿";
                  break;
                case "11":
                  idtype_name = "港澳居民通行证";
                  break;
                case "12":
                  idtype_name = "台胞证";
                  break;
                case "17":
                  idtype_name = "港澳台居民居住证";
                  break;
              }
              hxui.toast("请务必仔细核对图片识别的各项内容是否正确，如果有误请重新拍照识别，或者直接修改。")
            }
          }
        } else {
          var a = 0;
          for (var i = 0; i < photo_index.length; i++) {
            if (photo_index[i] == 0) {
              data.type = "9018_" + i;
              a = i;
              break;
            }
          }
          var addPhoto = {
            "photo_code": data.type,
            "photo_url": data.wxsrc
          }
          vm.photo.push(addPhoto);
          photo_index[a] = 1;
        }
      } else {
        hxui.toast(data.result_message)
      }
    }

Answer 1

参考通义千问和郭老师的小迷弟雅思莫了-编写提供，主要是为了帮助您快速解决问题，如下回答，您可以参考下，如有问题，评论区留言。

在这个Vue.js的前端代码片段中，为了实现上传图片次数统计并传给后端，您需要在allimgup方法或相关的数据模型中添加对上传次数的计数逻辑。当用户上传身份证正面、反面或其他证件时，根据上传的证件类型和正反面进行计数，并在最终提交表单或者通过接口发送数据时将这些计数信息一起传递给后端。

以下是一个简化的示例：

data() {
  return {
    // 其他现有数据...
    uploadCounts: {
      idCardFront: 0,
      idCardBack: 0,
      otherDocs: {}
    }
  };
},
methods: {
  allimgup(up, type, code, $event) {
    // ...其他原有逻辑...

    // 根据type和code更新上传次数
    if (type === '01') { // 身份证
      if (code === '9001') { // 正面
        this.uploadCounts.idCardFront += 1;
      } else if (code === '9002') { // 反面
        this.uploadCounts.idCardBack += 1;
      }
      // 清零正面次数（如果切换到反面）
      if (this.uploadCounts.idCardFront > 0 && code === '9002') {
        this.uploadCounts.idCardFront = 0;
      }
    } else {
      // 对于其他证件类型的上传次数统计
      if (!this.uploadCounts.otherDocs[type]) {
        this.uploadCounts.otherDocs[type] = {};
      }
      if (!this.uploadCounts.otherDocs[type][code]) {
        this.uploadCounts.otherDocs[type][code] = 0;
      }
      this.uploadCounts.otherDocs[type][code]++;
    }

    // 在提交表单或者单独调用API发送数据时，将uploadCounts对象包含在请求体里发送给后端
    // ...
  },
  onSubmit() {
    const formData = new FormData();
    // 其他表单数据...
    formData.set('uploadCounts', JSON.stringify(this.uploadCounts));
    
    axios.post('/your-backend-url', formData)
      .then(response => {
        // 处理响应...
      })
      .catch(error => {
        // 处理错误...
      });
  }
}

请注意，上述代码是基于提供的Vue.js片段抽象出的一个简化实现，实际应用中可能需要根据您的具体业务逻辑调整。