vue-cli脚手架使用vue-qriously插件生成二维码并上传至服务器

首先安装插件

npm install vue-qriously --save-dev

main.js引用插件

import VueQriously from 'vue-qriously'   //二维码生成插件
Vue.use(VueQriously)

xxx.vue文件中

<template>
  <div class="er_code" v-if="initQCodeShow">
         // initQCode: vue实例中定义的变量   
         // size:是这个Canvas的大小
          <qriously :value="initQCode" :size="100" class="er_code_box"/>
  </div>
  <div class="caozuo_div">
        <div class="er_sure_btn" @click="savecanvas">发布</div>
        <div class="er_quxiao_btn" @click="cancle">取消</div>
  </div>
</template>
<script>
export default {
  name:'erCode',
  data() {
    return {
      initQCode: "http://xxx",  //生成二维码的链接
    };
},
<script>

生成图片，并上传

methods:{ 
  savecanvas() {
      let canvas = document.querySelector(".er_code_box")
      let that = this;
      html2canvas(canvas, { scale: 2, logging: false, useCORS: true }).then(
        function(canvas) {
          let type = "png";
          let imgData = canvas.toDataURL(type);
          // 照片格式处理
          let _fixType = function(type) {
            type = type.toLowerCase().replace(/jpg/i, "jpeg");
            let r = type.match(/png|jpeg|bmp|gif/)[0];
            return "image/" + r;
          };
          imgData = imgData.replace(_fixType(type), "image/octet-stream");
          let filename = "UUSound" + "." + type;
          that.saveFile(imgData, filename);
        }
      );
   },

   dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
   },
}

 saveFile(data, filename) {
      var toFile = this.dataURLtoFile(data, filename);
      console.log(toFile);
      var data = new FormData();
      data.append("img0", toFile);
      this.$axios.post("接口地址", data)
      .then(res=>{
       ...
      })
}