lrz的使用

在最近的一个物业管理的项目中，用户上传图片的时，需要对图片的大小进行限制，于是使用了未曾接触到的lrz插件对用户上传的图片进行压缩。关于lrz插件的使用有关以下记录。
1.如何使用
使用 npm 进行下载

cnpm instll lrz  --save

在main.js中引入

import lrz from 'lrz'

用户进行图片上传时，需要用一个input fire 来获取图片。

 <input id="file" type="file" accept="image/*" ref='file' @change="getImg($event)"/>

lrz(fire,[option])l
参数：
其中fire你所上传的图片的二进制流。
option为可选参数，具体参考git地址lrz
其结果返回一个promise对象，then(res)

res.fileLen 是压缩后的图片大小，可以通过这个的值传递给后端，判断是否上传完整；
res.base64 生成后的图片base64，后端可以处理此字符串为图片，也直接用于img.src = base64；
res.base64Len 生成后的base64的大小，后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)；
res.origin 为原始图片的一些数据信息，例如：图片名称，图片的大小，图片的类型等等都保存在这个里面；

例：

<template>
    <div class="index">
        <!-- 图片上传 -->
        <div class="img">
            <input id="file" type="file" accept="image/*" ref='file' @change="getImg($event)"/>
            <span class="close" v-show='state' @click="close">x</span>
            <img :src="img" alt="" v-show='state'>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            state:false,
            img:''
        }
    },
    components: {
        
    },
    methods: {
        getImg(e){
            lrz(e.target.files[0],'').then(res=>{
                this.img=res.base64;
                this.state=true;
                console.log(res)
            })
        },
        close(){
            this.state=false;  //关闭显示状态
            this.img='';  //清空图片路径
        }
    }
}
</script>


<style scope>
    .img{
        width: 8rem;
        height: 8rem;
        border: 1px solid #ccc;
        background: url('../assets/pp.png') no-repeat;
        background-size: 50%;
        background-position: center;
        position: relative;
    }
    .img input{
        width: 100%;
        height: 100%;
        display: block;
        opacity: 0;
        border: none;
       
    }
    .img .close{
        position: absolute;
        width: 20px;
        height: 20px;
        top: -10px;
        right: -10px;
        display: block;
        border-radius: 50%;
        background: #ccc;
        color: #fff;
        z-index: 3;
    }
    .img img{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
        left: 0;
        top: 0;
    }
</style>

由于缺少一些图片素材，最终效果不够美观。

次文仅作为笔记方便以后查看，不喜勿喷，如果还有什么插件，希望各位不吝分享，共同进步。