前端基于vue element-UI 的图片压缩上传七牛云

前端基于 vue  element 的图片上传新手上路 请多指教

<template>
<el-dialog
      title="上传图片"
      :visible.sync="dialogVisible1"
      width="50%"
      :modal="false">
      <!--第四行-->
      <!--第四行-->
      <el-row style="margin-top: 10px;border-bottom: 1px solid #ececec;padding-bottom: 20px">
        <el-col :span="24">
          <div class="img-list">
            <div class="img-content" v-for="(item,key) in housing.HouImg" :key="key">
              <img :src="item.url">
              <!-- 删除icon -->
              <div class="del" >
                <span @click="handleFileRemove(item,key,'HouImg')" style="color: red"><i class="el-icon-delete"></i></span>
              </div>
              <!-- 放大icon -->
              <div class="layer">
                <i class="el-icon-view" @click="handleFileEnlarge(item.url)"></i>
              </div>
            </div>
            <div v-if="!pass && progress !== 0" class="img-content img-progress">
              <el-progress type="circle" :percentage="progress" :status="proStatus"></el-progress>
            </div>
            <div class="img-upload" v-if="housing.HouImg.length<3">
              <el-upload class="uploader"
                         ref="upload"
                         list-type="picture-card"
                         :show-file-list="false"
                         :limit="14"
                         :on-change="uploadOnChange"
                         action="https://jsonplaceholder.typicode.com/posts/"
                         :before-upload="beforeAvatarUpload"
                         :on-success="uploadOnSuccess"
                         :on-error="uploadOnError"
                         :on-progress="uploadOnProgress"
                         :http-request="HouImgFile">
                <i class="el-icon-plus avatar-uploader-icon" ></i>
              </el-upload>
            </div>
            <el-dialog title="" :visible.sync="isEnlargeImage" size="large" :modal-append-to-body="false" top="8%" width="50%">
              <img @click="isEnlargeImage = false" style="width:100%;" :src="enlargeImage">
            </el-dialog>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
  <el-button @click="dialogVisible1 = false">取 消</el-button>
  <el-button type="primary" @click="sunmit()">确 定</el-button>
</span>
    </el-dialog>

</template>

<script>
  export default {
    props:[
      'HouId'//父空间传的对象
    ],
    data () {
      return {

        dialogVisible1:false,
        ///图片所用到的对象
        housing: {
          HouImg: [],//房源照片
        },
        //图片
        //上传进度
        progress: 0,
        //是否上传成功
        pass: null,
        //放大图片
        isEnlargeImage: false,
        //放大图片地址
        enlargeImage: '',
        //图片放大的
        dialogVisible:false,

      }
    },
    methods:{

      
      //
      HouImgFile(e){
        var files = e.file
        if(!files) return
        this.createImage(files, e,'HouImg');
      },
      //其他图片上传
      createImage (file, e,Name) {//lrz压缩
        let vm = this
        // lrz图片先压缩在加载、
        this.lrz(file, { width: 480 }).then(function(rst) {
          vm.postImage(rst.file,Name);//上传至七牛云
          return rst
        }).always(function() {
          // 清空文件上传控件的值
          e.target.value = null
        })
      },
      //其他图片上传
      postImage(file,Name){
        let vm = this;
        var formData = new FormData();
        formData.append('file',file);
        this.$http({//获取经纬度
          url: this.$http.adornUrl('/sys/NiuYun/Token'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if(data.errorCode=="0"){
            this.qiniutoke = data.result.token;
            var addr = data.result.url;
            formData.append('token',this.qiniutoke);
            let config = {
              headers:{'Content-Type':'multipart/form-data'}
            };
            this.axios.post('http://upload.qiniu.com/',formData, {
              headers:{'Content-Type':'image'}
            }).then((response) => {
              vm.housing[Name].push({
                url: addr+response.data.key,
                name: ''
              })
              console.log(vm.housing);
            }).catch(function(error) {
              console.log(error)
            })
          }else{
            return;
            this.$Modal.error({
              title: '提示',
              content: data.errorMessage
            });
          }
        })
      },
      //图片上传
      //上传之前的方法
      beforeAvatarUpload(file) {
        console.log("上传之前的方法")
        const isJPG = file.type === 'image/jpeg'||'image/gif'||'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if(file.type===""||file.type===null){
          this.$Message.info({
            content: '上传图片只能是jpg、png、gif格式!',
            duration: 10,
            closable: true
          });
        }else{
          if (!isJPG) {
            this.$message({
              showClose: true,
              message: '上传图片只能是jpg、png、gif格式!',
              type: 'error'
            });
          }
        }
        if (!isLt2M) {
          this.$message({
            showClose: true,
            message: '上传图片大小不能超过2MB!',
            type: 'error'
          });
        }
        return isJPG && isLt2M;
      },
      //开始上传
      uploadOnProgress(e,file){
        console.log(e.percent,file)
        // this.progress = Math.floor(e.percent)
      },
      //上传
      uploadOnChange(file){
        console.log("——————————change——————————")
        if(file.status == 'ready'){
          this.pass = null;
          this.progress = 0;
        }else if(file.status == 'fail'){
          this.$message.error("图片上传出错，请刷新重试！")
        }
      },
      //上传成功
      uploadOnSuccess(e,file){//上传附件
        console.log("——————————success——————————")
        this.pass = true;

      },
      //上传之前报错
      uploadOnError(e,file){
        console.log("——————————error——————————")
        console.log(e)
        this.pass = false;
      },
      //放大图片
      handleFileEnlarge(_url){
        console.log(_url)
        if(_url){
          this.enlargeImage = _url;
          this.isEnlargeImage = !this.isEnlargeImage;
        }
      },
      //删除图片
      handleFileRemove(file,i,Name){
        console.log(file,i)
        if(!file.url){
          return false;
        }
        let that = this;
        this.$confirm('是否删除此图片？','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //可添加ajax
          this.$message.success("删除成功")
          that.housing[Name].splice(i,1)
        }).catch((meg) => console.log(meg))
      },
      //

    },
    created(){
      this.getHouingpojo();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>



  .img-list{
    overflow:hidden;
    width:100%;
  }
  .img-list .img-content{
    float:left;
    text-align:left;
    position:relative;
    display:inline-block;
    width:148px;
    height:148px;
    padding:5px;
    margin:0 20px 20px 0;
    border:1px solid #d1dbe5;
    border-radius:4px;
    transition:all .3s;
    box-shadow:0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
  }
  .img-list .img-upload{
    float:left;
    width:100px;
    height:100px;
    display:table;
    text-align:center;
  }
  .img-list .uploader{
    width:100%;
    display:table-cell;
    vertical-align:middle;
  }
  .img-list .img-progress{
    text-align:center;
    padding-top:50px;
  }
  .img-list .img-content img{
    display:block;
    width:100%;
    height:120px;
    margin:0 auto;
    border-radius:4px;
  }
  .img-list .img-content .name{
    margin-top:10px;
  }
  .img-list .img-content .name>div{
    width:85%;
    text-overflow:ellipsis;
    overflow:hidden;
    height:25px;
    line-height:25px;
  }
  .img-list .img-content:hover .del,
  .img-list .img-content:hover .layer{
    opacity:1;
  }
  .img-list .img-content .del,
  .img-list .img-content .layer{
    opacity:0;
    transition:all .3s;
  }
  .img-list .img-content .del{
    width:100px;
    text-align: right;
    font-size:0.1em;
    position:absolute;
    bottom:3px;
    right:3px;
    cursor:pointer;
  }
  .img-list .img-content .layer{
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:125px;
    color:#fff;
    text-align:center;
    z-index:5;
    background-color:rgba(0,0,0,.4);
  }
  .img-list .img-content .layer i{
    font-size:1.6em;
    margin-top:50px;
  }

</style>