プラグインVUE LRZを用いた画像圧縮

インストールとインポートNPM

海抜とLRZ - S

< テンプレート> 
  < divの> 
    < divの@ click.stop = "addPic" REF = "アップロード" クラス= "BTN" > 
      < 入力タイプ= "ファイル" 受け入れる= "画像/ *" @change = "onFileChange" スタイル=」表示：なし」複数の/> chooseImg
     </ divの> 
    < P V-IF = "ますisNaN（前）"！>压缩前：{{前|番号}}キロバイト</ P > 
    <p個のV-IF = "！ますisNaN（後）" >圧縮後：{{|}}後数キロバイト</ P > 
  </ DIV > 
</ テンプレート>

インポート"LRZ"からLRZ ; 
輸出デフォルト{ 
  データ（）{ 
    リターン{ 
      imgUrl用：[]、
      前：NaN 3を、
      後：NaN 3を
    }; 
  }、
  メソッド：{ 
    onFileChange（E）{ 
      // ファイルオブジェクトを取得
      するvarファイルを= E. target.files [0 ];
       // の非圧縮ファイルサイズが
      この .before = file.size / 1024 ;
       この .imgUrl = URL.createObjectURL（ファイル、{品質：0 }）; 
      LRZ（この .imgUrl）.then（RST => {
         // の圧縮ファイルサイズ
        、この.after = rst.fileLen / 1024 。
      }）; 
    } 
  } 
}