vue上传图片 +element

cnpm install lrz --save-dev  
需要上传的文件引入
import lrz from 'lrz'



<el-image v-if="userUpDateMessageall.picIdCardFront"
             style="width: 200px; height: 200px"
              :src="userUpDateMessageall.picIdCardFront"  >
            </el-image>
            <p v-else>暂无图片</p>
            下面的是按钮
   <el-button type="primary" style="position: relative;overflow: hidden;">上传<i class="el-icon-upload el-icon--right"></i>
            <input type="file"
            style="position: absolute;top: 0;left: 0;height: 50px;opacity: 0;"
                       @change="tirggerFile($event ,'picIdCardFront')"
                       accept="image/*" />
            </el-button>






      tirggerFile (event ,userTypeImg) {
           console.log(userTypeImg)
        let _this=this
      var file = event.target.files[0]
      if(file.size/1024/1024>5){
           this.$message({
          message:'请上传小于5M的图片',
          type: "error"
          })
        return
      }
      if(file.type.indexOf('image')==-1){
           this.$message({
          message:'不支援的文件格式',
          type: "error"
          })
        return
      }
      //创建文件读取相关的变量
      var imgFile;
      var reader = new FileReader();
      //为文件读取成功设置事件
      reader.onload = function (e) {
        imgFile = e.target.result;
        var data= { image: imgFile }
        getUserListMessageImg(data,'/UploadBase64Servlet').then((res) => {
          if (res.data.status === 1) {
这里多个上传所以 做了判断
            switch(userTypeImg) {
              case 'picIdCardFront':
                  _this.userUpDateMessageall.picIdCardFront = res.data.msg
                  break;
              case 'picIdCardBack':
                  _this.userUpDateMessageall.picIdCardBack = res.data.msg
                  break;
              case 'holdPic':
                  _this.userUpDateMessageall.holdPic = res.data.msg
                  break;
              case 'picAddress':
                  _this.userUpDateMessageall.picAddress = res.data.msg
                  break;
                } 
          
          }else{
            this.$message({
          message:'上传失败',
          type: "error"
          }) 
          }
        })
        
    
    
      };
      lrz( file, {
        quality: 0.6, // 图片压缩质量，取值0-1，默认为0.7
        filedName: '', // 后端接收的字段名，默认为 'file'
      }).then( (rst) => {
      //正式读取文件
      reader.readAsDataURL(rst.file);
      })
      .catch(function (err) {
          // 处理失败会执行
      })
      .always(function () {
          // 不管是成功失败，都会执行
      });
    },