vue-cropperは画像を切り取って圧縮してアップロードします

vue-cropperアップロード後にfileファイルを返すが画像が大きすぎるという問題がよく発生するのでアップロード後にlocalResizeIMGを使用して圧縮する第一歩:localResizeIMGのインストール

npm i lrz -S

ステップ2:該当する場所に導入

import lrz from 'lrz'

ステップ3:圧縮

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)
    //     
  })
 }