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