关于实现el-upload上传一张图片后就隐藏上传标志

这里先把实现的效果给大家看下 帮大家节约下时间是否是自己要看的内容
总体来说就是，现有的el-upload组件有一个limit的参数，传入后可以控制想要上传的数量，假如设置的limit是1，实现的效果是上传完一张后还有个上传的标志，只不过是想要再次上传内容时候是没反应。
如下图

那现在，我们要实现的效果就是设置limit为1的情况下 把下面的提交按钮隐藏掉，在删除图片后再显示出来上传的标志
效果如下  在点击那个删除的icon 显示原来的上传图片标志

那现在大家应该就知道我要说的是要实现什么效果了 感兴趣的可以看以下代码
 

<template>
  <div>
           <el-upload
              action="#"
     /* 这里注释讲解 需要拿过去的朋友自行删除这部分内容
     limitCountImg是一个变量，用于控制你想要显示的是几张图片，到第几张图片的时候隐藏上传的标志
     class的话是实现效果的重点：实现思路如下 在图片上传后，通过onchange事件来检测是否图片数量 
     到了我们设置的值，到了这个值后 就通过class的变量uploadIconOne和uploadIcon来修改upload 
     的class名称，这样做的目的是为了实现绑定在uploadIcon类名下的css样式 该样式能够隐藏图片上 
     传的标志，通过来回切换css的名称，从而实现图片上传标志的显示和隐藏
     */
              list-type="picture-card"
              :auto-upload="false"
              :limit="limitCountImg"
              :class="{ uploadIconOne: showImg, uploadIcon: noneUploadImg }"

              :file-list="fileList"
              file="file"
              :on-change="uploadImgChange"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>

                  <span
                    class="el-upload-list__item-delete"
                    @click="handleDeleteImgRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
        
          // 这个弹框是实现查看按钮后放大图片
          <el-dialog :visible.sync="imgDialog">
            <img width="300px" :src="form.imageUrl" alt="" />
          </el-dialog>  
</div>
</template>
<script>
export default {
   data(){
       return {
         form:{
          imageUrl:'',//放大后展示的图片路径
        },
      showImg: true, //默认展示
      noneUploadImg: false, //
      fileList: [], //文件传输流
      needfile: {}, //需要上传的文件，最后上传的文件是存储在这里 上传文件给后端的格式后续有需 
                     //要可以再另写一篇
      limitCountImg: 1,//设置的第几张图片隐藏上传标志
      imgDialog: false,//图片弹框
   }，
   methods:{
         // 图片上传功能实现
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
      this.form.image = file.raw; // 将上传的图片数据存放在form对象的image属性中
    },


    handlePictureCardPreview(file) {
      this.form.imageUrl = file.url;
      this.imgDialog = true;
    },
    // 判断数量，是否显示上传icon
    uploadImgChange(file, fileList) {
      this.needfile = file.raw;
      console.log("这是要上传的文件===", file);
      this.noneUploadImg = fileList.length >= this.limitCountImg;
    },
    // 删除图片，判断数量，是否显示icon
    handleDeleteImgRemove(file) {
      console.log("要删除的文件=====", file);
      this.fileList = [];
      this.needfile = {};

      // this.noneUploadImg = fileList.length >= this.limitCountImg;
      this.noneUploadImg = false;
    },
   }
 }
};
</script>
<style lang='scss' scoped>
.uploadIcon ::v-deep .el-upload--picture-card {
  display: none !important; /* 上传按钮隐藏 */
}
</style>