遇到需求 需要上传身份证，或者银行卡

传的时候需要传一个file  文件 在这里 我用了组件

也可以用npm包 pluplad（具体我没使用过）

Plupload 上传详细讲解，Plupload 多实例上传，Plupload多个上传按钮 —技术博客

1、html部分

这里我用到了vant3的组件 链接：Vant 3 - Mobile UI Components built on Vue

  <div class="idcardCont"
         v-if="mustInfo.uploadIdcard != '-1'">//这块是一个是否显示 及必填
      <p class="cardTitle">请上传您的身份证照片</p>
      <p class="cardTip">图片格式支持 jpg, png 格式，文件需小于5M</p>
      <div class="cardImgCont">
        //上传组件 
        <van-uploader :after-read="afterRead"
                      :max-size="5 * 1024*1024">
          <div class="frontUrl cardItem">
            <div v-if="authInfo.frontUrl!==''"
                 class="cardImgWarp">
              <div class="cardImg"><img class="tipImg"
                     :src="authInfo.frontUrl"></div>
              <div class="upLoadBtn">重新上传</div>
            </div>
          </div>
        </van-uploader>
        <van-uploader :after-read="endRead"
                      :max-size="5 * 1024*1024">
          <div class="backUrl cardItem">
            <div v-if="authInfo.backUrl!==''"
                 class="cardImgWarp">
              <div class="cardImg"><img class="tipImg"
                     :src="authInfo.backUrl"></div>
              <div class="upLoadBtn">重新上传</div>
            </div>
          </div>
        </van-uploader>

      </div>
    </div>

2、js部分

 //上传身份证正面
    const afterRead = (file, detail) => {
      // 此时可以自行将文件上传至服务器
      // console.log(file.file)
      // console.log(type.value)
      let formData = new FormData()// 需要把file转换成二进制
      formData.append('file', file.file) //传到服务器
      fileUpload(formData).then((res) => {//调用上传图片的接口 接口会返回一个https格式的图片
        if (res.data) {
          authInfo.value.frontUrl = res.data.fileUrl
          upType.value = 1 //正面为1
          getOcrInfo(res.data.fileUrl, upType.value)//这时候要调用ocr解析身份证银行卡 拿返回的值
        }
      })
    }
    //上传身份证反面
    const endRead = (file) => {
      // 此时可以自行将文件上传至服务器
      let formData = new FormData()
      formData.append('file', file.file)
      fileUpload(formData).then((res) => {
        if (res.data) {
          authInfo.value.backUrl = res.data.fileUrl
          upType.value = 2 //反面为2
          getOcrInfo(res.data.fileUrl, upType.value)
        }
      })
    }
    // ocr上传身份证|银行卡 获取解析成功数据 type 1-身份证正面；2-身份证背面；3-银行卡
    const getOcrInfo = (url: any, type: Number) => {
      cardByurl({ fileUrl: url, type: type }).then((res) => {
        // console.log(res)
        if (res.data) {
          ocrCardInfo.value = res.data.ocrIdcardVO
          //sifnAddFlag true 签约 false 实名编辑
          if (signAddFlag.value) {
            if (upType.value == 1) {
              //upType=1正面
               //信息为空直接赋值
              if (authInfo.value.name == '' && authInfo.value.cardNo == '') {
                authInfo.value.name = ocrCardInfo.value.name
                authInfo.value.cardNo = ocrCardInfo.value.cardNumber
                authInfo.value.address = ocrCardInfo.value.address
              } else if (//不为空提示弹框 是否更新信息
                (authInfo.value.name !== ocrCardInfo.value.name ||
                  authInfo.value.cardNo !== ocrCardInfo.value.cardNumber) &&
                ocrCardInfo.value.cardNumber !== ''
              ) {
                updateConfirm() //解析信息与填写信息不一致调用弹框
              }
            } else {
              if (ocrCardInfo.value.startDate !== '') {
                if (
                  authInfo.value.startDate == '' &&
                  authInfo.value.endDate == ''
                ) {
                  authInfo.value.ocrStartDate = res.data.ocrIdcardVO.startDate
                  authInfo.value.ocrEndDate = res.data.ocrIdcardVO.endDate
                  authInfo.value.hasLongTerm = res.data.ocrIdcardVO.longTerm
                  authInfo.value.hasLongTerm == 1
                    ? (checked.value = true)
                    : (checked.value = false)
                } else {
                    //是否显示必填
                  if (mustInfo.value.idcardValidPeriod == '-1') {
                    return false
                  }
                  if (
                    authInfo.value.startDate == ocrCardInfo.value.startDate &&
                    authInfo.value.endDate == ocrCardInfo.value.endDate
                  ) {
                    return false
                  }
                  updateConfirm() //调用弹框
                }
              }
            }
          }
        }
      })
    }

//这些方法都是在setup（）里面 需要return出去一下

 主要是需要把 file文件用FromDate包一下 上传 不然会上传错误