vue 压缩图片

安装

npm i lrz --save

main.js 文件引入

import lrz from 'lrz'

页面使用

 

<template>
  <div>
    <!-- 上传本地图片并回显 -->
    <input type="file" id="inputFileImg" name="pic" accept="image/*"  @change="onFileChange" ref="inputer">
    <ul>
      <li v-for="(img) in imgList" :key="img.id" @click="imgListClick(img.id)">
        <img alt="再无图片" id="myImg" :src="img.img" height="100px" width="100px"> 
      </li>
    </ul>
  </div>
</template>

<script>
  import $ from 'jquery'
  export default {
  data() {
    return {
      imgId: 0,
      imgList: [],
    };
  },
  methods: {
    // 监听上传图片
    onFileChange (e) {
      var file = e.target.files[0];
      
      // 压缩图片
      lrz( file, {
        with: 50, // 图片最大的宽度。默认为原图的宽度
        height: 50, // 图片最大的高度，默认为原图的高度
        quality: 0.2, // 图片压缩质量，取值0-1，默认为0.7
        filedName: '', // 后端接收的字段名，默认为 'file'
      }).then( (rst) => {
        // 处理成功会执行
        var _this = this;
          // 回显图片
          _this.imgList.push({
          id: _this.imgId += 1,
          img: rst.base64
        });
        console.log(rst.file.size / 1024, 'kb'); // 压缩后
      })
      .catch(function (err) {
          // 处理失败会执行
      })
      .always(function () {
          // 不管是成功失败，都会执行
      });
      console.log(file.size / 1024, 'kb'); // 压缩前 
    },
    // 删除图片
    imgListClick (id) {
      this.imgList = this.imgList.filter( (item) => {
        return item.id != id;
      });
    }
  },
}
</script>

<style lang='less' scoped>
</style>