zoukankan      html  css  js  c++  java
  • 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;
          });
        }
      }
    }
  • 相关阅读:
    第 6 章 Cinder
    第 6 章 Cinder
    第 6 章 Cinder
    第 6 章 Cinder
    第 6 章 Cinder
    第 6 章 Cinder
    第 6 章 Cinder
    第 6 章 Cinder
    第 6 章 Cinder
    第 6 章 Cinder
  • 原文地址:https://www.cnblogs.com/223zzm/p/11266648.html
Copyright © 2011-2022 走看看