vue压缩图片上传

<div class="upload_bar">
      <div class="upload_box">
        <input
          type="file"
          class="load_input"
          accept="image/gif, image/jpeg, image/jpg, image/png"
          @change="changeimg($event)"
        />
        <div class="icon_box">
          <i class="iconfont iconjia1"></i>
          <p class="my_gray">请选择凭证截图</p>
        </div>
      </div>
      <div class="img_box">
        <img id="upload_img" class="load_img" :src="pre_img" alt />
      </div>
    </div>

export default {
  data() {
    return {
      // 预览的图片
      pre_img: "",
      // 上传的图片
      uploadimg: ""
    };
  },
  methods: {
    changeimg(e) {
      var that = this;
      var imgbox = document.getElementById("upload_img");
      var canvas = document.createElement("canvas");
      var file = e.target.files[0];
      var render = new FileReader();
      render.readAsDataURL(file);
      render.onload = function(e) {
        that.pre_img = e.target.result;
        // 必须先有图片才能获取宽高
        imgbox.onload = function() {
        //获取图片的宽高
          var w = this.width;
          var h = this.height;
          canvas.width = w;
          canvas.height = h;
          // canvas画图
          var ctx = canvas.getContext("2d");
          ctx.drawImage(imgbox, 0, 0, w, h);
          // 生成base64
          var base64 = canvas.toDataURL("image/jpeg", 0.92);
          that.uploadimg = that.convertBase64UrlToBlob(base64);
            var formData = new FormData();
            formData.append("file",that.uploadimg,"image.png");
          console.log(that.uploadimg);
        };
      };
    },
    // base64转blob对象
    convertBase64UrlToBlob: function(urlData) {
      var arr = urlData.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 Blob([u8arr], {
        type: mime
      });
    },
    confirm() {
     //上传接口
      
    }
  },

formData.append添加文件必须加后缀名作为第三个参数;

如有不足，请见谅,并告诉我最优解决方法,我是小白