vue-cropper裁剪图片后压缩上传

vue-cropper上传后返回一个file文件
但是经常出现图片过大的问题
所以上传后使用localResizeIMG进行压缩
第一步：安装localResizeIMG

npm i lrz -S

第二步： 在相应位置引入

import lrz from 'lrz'

第三步：压缩

this.imgUrl = URL.createObjectURL(file, {
      quality: 0 })
let quality = 1
// 根据图片大小设置压缩比例
 if (file.size >= 1024 * 1024 && file.size < 1024 * 1024 * 5) {
     
   quality = 0.8
 } else if (file.size < 1024 * 1024) {
     
   quality = 1
 } else {
     
   quality = 0.5
 }
 console.log('quality', quality)
 const imgSrc = window.URL.createObjectURL(file)
 let img = new Image()
 img.src = imgSrc
 let _this = this // onload 里面不能用this
 console.log(img)
 img.onload = function() {
     
   // 我在这里就可以获取到图片的宽度和高度了 img.width 、img.height
   console.log(img.width)
   const width = img.width > 1200 ? 1200 : img.width // 设置图片宽度，避免图片过大模糊
   _this.upload(width, quality)
   lrz(_this.imgUrl, {
      width: width, quality: quality }).then(rst => {
     
    // rst.fileLen为压缩后文件大小，rst.file为压缩后的图片文件
    _this.after = rst.fileLen / 1024
    console.log('this.after', quality, _this.after)
    // 上传图片
  })
 }