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