1、外部引入JS
github下载地址:https://gitee.com/weijunw/erweima/blob/master/erweima-jiexi-demo/reqrcode.js

(我是拿过来放在公司的阿里云服务器上,在index.html引用的)
可参考:https://gitee.com/weijunw/erweima/tree/master/erweima-jiexi-demo

2、在vue页面使用

data:

alipayQrcodePrefix: 'alipayqr://platformapi/startapp?saId=10000007&qrcode=',
arouseAlipayUrl: ''

下图是最后所得的拼接完的路径:
在这里插入图片描述

js:

 // 上传图片
    Upload(file) {
      const that = this
      const tmpcnt = file.file.name.lastIndexOf('.')
      const exname = file.file.name.substring(tmpcnt + 1)
      const names = ['jpg', 'jpeg', 'png']
      if (names.indexOf(exname) < 0) {
        this.$message.error('不支持的格式!')
        return
      }
      if (file.file.size > 1024 * 1024) {
        this.$message.error('图片大小最大1M')
        return
      }
      async function multipartUpload() {
        const fileName = that.Aliyun.objectName + '/' + Date.now() + '-' + file.file.name
        client(that.Aliyun).put(fileName, file.file,
          {
            progress: function(p) { // 获取进度条的值
              console.log(p)
              that.progress = p * 100
            }
          }).then(
          result => {
            // 识别二维码 判断是否是支付二维码 1
            if (that.form.cardType === 2) { // 支付宝
              // eslint-disable-next-line no-undef
              qrcode.decode(that.getObjectURL(file.file)) // 如果只需要识别http的二维码图片,将图片路径传进decode就好,
              // eslint-disable-next-line no-undef
              qrcode.callback = function(imgMsg) {
                var QRUrl = imgMsg.toLowerCase()
                if (QRUrl.toLowerCase().indexOf('qr.alipay.com') === -1) { // 非支付宝二维码
                  that.$message.error('无法识别收款码,请重新上传!')
                  return false
                } else {
                  that.form.cardUrl = result.url
                  that.arouseAlipayUrl = that.alipayQrcodePrefix + imgMsg
                  console.log(that.arouseAlipayUrl) // 这里就是最后拼接好的支付宝跳转链接
                }
              }
            } else {
              that.form.cardUrl = result.url
            }
          }).catch(err => {
          console.log('err:', err)
        })
      }
      multipartUpload()
    },
    // 识别二维码 图片路径 2
    getObjectURL(file) {
      var url = null
      console.log(window.createObjectURL)
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(file)
      } else if (window.URL !== undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    },
Logo

前往低代码交流专区

更多推荐