vue移动端图片压缩上传，使用lrz

<template>
  <div class="uploadOutter">
    <slot>
      <div class="uploadInner" @click="$refs.file.click();">
        <div class="imgBox" v-if="value&&multiple==false">
          <img :src="value" alt class="img" title="图片" />
          <div class="close" @click.stop="closeHansle">
            <van-icon name="cross" />
          </div>
        </div>
        <img v-else :src="jia" alt class="tjimg" title="图片" />
      </div>
    </slot>
    <input @change="beforeRead" style="display:none;" ref="file" type="file" accept="image/*" capture="camera">
  </div>
</template>
<script>
import lrz from "lrz";
export default {
  props:{
    multiple:{
      default:false
    },
    value:{
      default:''
    },
  },
  data () {
    return {
      jia: require("@/assets/images/jia.png"),
    }
  },

  components: {},

  methods: {
    //上传文件
    beforeRead(e) {
      console.log(e)
      if(!e.target.files[0]){
        return
      }
      this.$toast.loading({duration:0,forbidClick:true})
      lrz(URL.createObjectURL(e.target.files[0], { quality: 0 })).then(rst => {
        this.loadHandle(rst.base64)
      });
    },
    loadHandle(file){
      let formData = new FormData()
      formData.append('imgStr',file)
      this.$http({
        url:'文件上传接口地址',
        method:'post',
        data:formData
      }).then(({data:{code,data,message}})=>{
        if(code=='0000'){
          if(this.multiple){
            let value = this.value.split(',').filter(e=>e)
            value.push(message)
            this.$emit('input',value.join(','))
          } else {
            this.$emit('input',message)
          }
          this.$emit('change',message)
          this.$toast({message:'上传成功!'})
        } else {
          this.$toast.fail(message)
        }
      },err=>{})
    },
    closeHansle(){
      this.$emit('input','')
    },
  }
}
</script>

<style lang="scss" scoped>
.uploadOutter{
width: 101px;
height: 84px;
}
.uploadInner{
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: dashed 2px #dce8fa;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  .tjimg {
    width: 26px;
    height: 26px;
    margin-top: 10px;
  }
  .imgBox{
    width: 100%;
    height: 100%;
    position:relative;
    .img{
      width: 100%;
      height: 100%;
    }
    .close{
      position:absolute;
      right:0;
      top:0;
      width:20px;
      height:20px;
      line-height:30px;
      background:rgba(0,0,0,0.5);
      color:#fff;
      text-align:center;
    }
  }
}
</style>