elementUI的Upload的手动上传及限制数量后隐藏上传样式

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      :limit="limitNum" //最大允许上传个数
      :class="{hide:hideUploadEdit}" //加类名为了隐藏上传样式
      :on-remove="handleRemove" //文件列表移除文件时的钩子
      :on-change="handleEditChange" //文件状态改变时的钩子(可以限制文件数量和文件大小)
      :http-request="ImgUploadSectionFile" //覆盖默认的上传行为，实现手动上传
      :before-upload="beforeAvatarUpload" //上传文件之前的钩子
      :with-credentials="true" //支持发送 cookie 凭证信息
      :auto-upload="true" //是否在选取文件后立即进行上传(不知什么原因false没效果)
      accept=".png, .jpg" //接受上传的文件类型
      action="" //手动上传不需要填写url
      list-type="picture-card" //设置文件列表的样式
      :file-list="fileList" //上传的文件列表
    >
      <i slot="trigger" class="el-icon-plus"></i>
      <!-- <el-button slot="trigger" type="primary">选取图片</el-button> -->
    </el-upload>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      hideUploadEdit: false, // 隐藏'上传按钮'
      limitNum: 1, // 图片数量
      fileList: [] // 图片列表
    };
  },
  methods: {
    // on-change添加文件、上传成功和上传失败时都会被调用
    handleEditChange(file, fileList) {
      this.hideUploadEdit = fileList.length >= this.limitNum;
      console.log("this.fileList:", this.fileList);
      console.log("this.hideUploadEdit:", this.hideUploadEdit);
    },
    // on-remove文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      if (fileList.length === 0) {
        this.fileList = [];
      } else {
        let dl = this.fileList.indexOf(file);
        this.fileList.splice(dl, 1);
      }
      this.hideUploadEdit = fileList.length >= this.limitNum;
    },
    // 上传到服务器
    submitUpload() {
      console.log(this.param);
      if (!this.param) {
        this.$message("请选择图片");
      } else {
        let formData = new FormData(); //formdata格式
        formData.append("fileName", this.param.file);
        axios({
          method: "post",
          url: '', //这里填写上传图片的接口,
          data: {} //这里可以填写上传时携带的数据,不需要可以不写
        })
          .then(result => {
            console.log("上传成功:", result);
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    // before-upload上传文件之前的钩子 -- 限制文件大小
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // http-request自定义上传
    ImgUploadSectionFile(param) {
      this.param = param;

      //   //下面代码放在这里的作用是:选中图片后立即上传,但我需要选中图片后再点击按钮上传,所以移到按钮的点击事件里
      //   let formData = new FormData(); //formdata格式

      //   console.log('param.file:  ',param.file)
      //   console.log('param:  ',param.file)
      //   formData.append("fileName", param.file);
      //   formData.append("userid", '15832919197225');
      //   formData.append("uuid", '7658798679');
      //   axios({
      //       method:'post',
      //       url:'http://139.155.91.117:8082/base/gps/fileUpload',
      //       data:formData
      //   }).then(result=>{
      //       console.log('上传成功:',result)
      //   }).catch(err=>{
      //       console.log(err)
      //   })
    }
  }
};
</script>
<style lang='less'>
// 隐藏上传按钮
.hide .el-upload--picture-card {
  display: none;
}
// 添加/删除文件时去掉动画过渡
.el-upload-list__item {
  transition: none !important;
}
</style>