vue使用lrz插件壓縮圖片

npm安裝並導入

npm i lrz -S

<template>
  <div>
    <div @click.stop="addPic" ref="upload" class="btn">
      <input type="file" accept="image/*" @change="onFileChange" style="display: none" multiple />chooseImg
    </div>
    <p v-if="!isNaN(before)">壓縮前:{{before|number}}kb</p>
    <p v-if="!isNaN(after)">壓縮后:{{after|number}}kb</p>
  </div>
</template>

import lrz from "lrz";
export default {
  data() {
    return {
      imgUrl: [],
      before: NaN,
      after: NaN
    };
  },
  methods: {
    onFileChange(e) {
      // 獲取文件對象
      var file = e.target.files[0];
      // 壓縮前文件大小
      this.before = file.size / 1024;
      this.imgUrl = URL.createObjectURL(file, { quality: 0 });
      lrz(this.imgUrl).then(rst => {
        // 壓縮后文件大小
        this.after = rst.fileLen / 1024;
      });
    }
  }
}