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>