微信原生小程序上传与识别以及监听多个checkbox事件打开pdf-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信原生小程序上传与识别以及监听多个checkbox事件打开pdf。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.点击上传并识别

微信原生小程序上传与识别以及监听多个checkbox事件打开pdf,前端,微信,小程序,前端

组件样式
      <van-field border="{{ false }}" placeholder="请输入银行卡卡号" model:value="{{bankNo}}" label="卡号">
        <van-icon bindtap="handleChooseImg" slot="right-icon" name="scan" class="custom-icon" />
      </van-field>


view .van-field__control {
  text-align: right;
}

方法
  handleChooseImg(){
    wx.chooseImage({
      count: 1,
      sourceType: ['album'],
      success: (res) => {
        let temp_path = res.tempFilePaths[0];
        console.log(temp_path);
        const _this = this
        wx.uploadFile({
          filePath: temp_path, 文件路径 按后端接口参数修改
          name: 'file', 传过去的文件名
          url: 后端接口,
          success: (res) => {
            let data = JSON.parse(res.data)
            if (data.code === 200) {
              _this.getBankCardOcr(data.data.fullFilePath)
            } else {
              wx.showToast({
                title: '上传失败',
                icon: 'none',
                duration: 2000
              });
            }
            wx.hideLoading()
          },
          fail: () => {
            console.log("失败...");
          }
        })
      }
    })
  },

  OCR识别
    getBankCardOcr(imageUrl) {
      wx.showLoading()
      util.request(commonLoan.bankCardOcr, {
        imageUrl
      }, 'GET').then((res) => {
        wx.hideLoading()  
      }).catch(err => {})
    },

2.一个方法监听多个checkbox打开pdf

场景：多个checkbox，我觉得要一个一个写bindchange事件太杂糅

微信原生小程序上传与识别以及监听多个checkbox事件打开pdf,前端,微信,小程序,前端文章来源地址https://www.toymoban.com/news/detail-804113.html

样式代码

 <view style=" display: flex;text-align: left; margin: 10rpx 0 10rpx 40rpx; font-size: 26rpx;line-height: 44rpx">
            <van-checkbox style="position: relative; top: 6rpx;" icon-size="25rpx" shape="square" value="{{check1}}" data-index='1' bindchange="changeCheck2"></van-checkbox>
            <view style="color: #999;font-size: 13px"> 阅读并同意签署<text style="color:rgb(98, 78, 255);font-size: 13px;" bindtap="openUrl" data-num='h5012'>《个人授权书》</text>（适用于零售信贷线上业务个人征信授权）</view>
</view>
data-index 是协议的下标 12345

change事件
  changeCheck2(e) {
    this.setData({
      ['check' + e.currentTarget.dataset.index]: e.detail   this.setData的key值设置为变量
    })
    if (this.data.check1 && this.data.check2 && this.data.check3 && this.data.check4 && this.data.check5) {
      this.setData({
        checkAll: true
      })
    } else {
      this.setData({
        checkAll: false
      })
    }
  },

3. 打开pdf文档

// 打开PDF图片 这里的num是协议的名字  
function openPdfPic(num) {
  wx.showLoading("文件加载中...");
  wx.downloadFile({
    url: `协议存储的网络地址/${num}.pdf`,
    success: (res) => {
      if (res.tempFilePath) {
        wx.openDocument({
          filePath: res.tempFilePath,
          fail: (err) => {
            console.error(err);
          },
          complete: () => {
            wx.hideLoading();
          }
        })
      }
    },
    fail: (err) => {
      console.error(err);
      wx.hideLoading();
    }
  })
}

到了这里，关于微信原生小程序上传与识别以及监听多个checkbox事件打开pdf的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！