Vue中配合后端signalR实现扫码上传图片功能

需求：实现pc端扫码跳转到对应的移动端页面 完成上传图

 

 

 

1.使用js生成二维码

npm install --save qrcode;

import QRCode from 'qrcodejs2'; // 在需要使用到二维码的模块中导入

 /** 在Methods中准备方法 生成二维码*/

    createQRCode: function () {

      new QRCode(this.$refs.qrCodeDiv, {

        text: `http://uat.xxx.com.cn/?identification=${this.identification}`,

        width: 135,

        height: 135,

        colorDark: "#333333", //二维码颜色

        colorLight: "#ffffff", //二维码背景色

        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H

      })

    }

 

/**mounted  中调用方法*/

  mounted () {

    this.identification = this.pub.getGid(); // 随机生成GUID

    let connectScript = document.createElement('script')

    connectScript.type = 'text/javascript';

    connectScript.src = 'https://XXX/signalr.min.js'

    document.body.appendChild(connectScript);; //创建script标签引入signalr

    connectScript.onload = () => this.initScoket();

    this.$nextTick(function () {

      this.createQRCode();

    })

  },

 

2.建立连接

    initScoket () {
      this.scoket = new signalR.HubConnectionBuilder().withUrl(`https://xx.xx.com/uploadhub?identification=${this.identification}`).build();
      this.scoket.start().catch(err => console.error(err.toString()));
      this.scoket.on('Online', function (user) {
        console.log('连接成功', user);
      });
      this.scoket.on("ReceiveMessage", (message) => { //接收到的数据
        this.images = JSON.parse(message);
    },

3.主动发送数据的方法

    /**发送数据*/
    sendSocket () {
      this.scoket.invoke("SendMessage", JSON.stringify(this.images)).then(() => {
        console.log('发送数据 成功', JSON.stringify(this.images));
      }).catch(function (err) {
        return console.error(err.toString());
      });
    },