vue实现图片转字符串并上传

<div class="face">
      <p>
        <img
          class="normalFace"
          src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3270902236,2444876234&fm=26&gp=0.jpg"
          @click="fileSelect()"
          id="testimg"
        />
      </p>
      <input
        type="file"
        name="fileToUpload"
        id="fileToUpload"
        @change="fileSelected()"
        style="display:none;"
      />
    </div>

fileSelect() {
      document.getElementById("fileToUpload").click();
      var input = document.getElementById("fileToUpload");
      input.addEventListener("change", handleFiles, false);
      function handleFiles(e) {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var img = new Image();
        img.onload = function() {
          ctx.drawImage(img, 0, 0);
          var base64 = canvas.toDataURL();
          //获取图片base64
          console.log(base64);
        };
        img.src = URL.createObjectURL(e.target.files[0]);
        document.getElementById("testimg").src = img.src;
      }
    },

    fileSelected() {
      console.log("成功拿到图片");
      // 文件bai选择后触du发次zhi函数dao
    }