vue中使用lrz压缩图片上传

vue上传时压缩图片完成后上传，比较简单，记录一下，下面是html代码

<div class="file">
       <input type="file" @change="upfileimg($event)" accept="image/*"/> 上传图片
</div>

js代码

//上传图片
 upfileimg(e) {
      var token = sessionStorage.getItem("token");
      let file = e.target.files[0];
      console.log(file);
      lrz(file, { quality: 0.4 }//图片的质量，1为原图0为最低)
      .then((rst) => {
        let userfile = this.dataURLtoFile(rst.base64, rst.origin.name); //调用自己的upfile方法吧压缩后的base64转二进制
        let formdata = new FormData();
        formdata.append("file", userfile);
        formdata.append("token", token);
        //调用自己的接口方法
        this.$ajax.upload("接口路径", formdata).then((res) => {
          if (res.code == 0) {
            this.exhibitsObj.artworkUrl = res.data.url;
          }
        });
      });
    },
      //转换base64
    dataURLtoFile(dataurl, filename) {
      // 将base64转换为file文件
      // 参数dataurl base64字符串
      // 参数filename	图片名称
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {
        type: mime,
      });
    },

css

.file {
  position: relative;
  display: inline-block;
  background: #2db7f5;
  border: 1px solid #2db7f5;
  border-radius: 4px;
  padding: 4px 12px;
  /* overflow: hidden; */
  color: #fff;
  text-decoration: none;
  text-indent: 0;
  height: 31px;
  width: 100px;
  line-height: 20px;
}
.file input {
  position: absolute;
  /* font-size: 100px; */
  right: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}