# 【Vue】el-upload 限制只上传一张图片并隐藏右侧的上传区域

使用 element UI 中的 el-upload 如何限制上传一张图片后隐藏右侧的上传区域

主要代码块：

监听事件
watch: {
  onChangeImgUrl: {
    handler(newName) {
      var aa = document.querySelector('.el-upload--picture-card')
      if (newName) {
        aa.style.display = 'none' 
      } else {
        setTimeout(() => {
          aa.style.display = 'inline-block'
        }, 1100)
      }
    }
  }

原理：

因为只上传一张图片，监听图片的 url 即可。听过监听图片的 url 存在与否，通过获取 dom 元素设置不同的样式。

以下完整代码实现如下效果:

父组件setBank.vue
<template>
  <div class="setBank">
    <el-button type="primary" @click="addInfo">入驻</el-button>
    <el-dialog :visible.sync="checkDialogVisible" title="入驻">
      <Upload />
    </el-dialog>
  </div>
</template>
 
<script>
import Upload from './upload.vue'
export default {
  components: {
    Upload
  },
  data() {
    return {
      checkDialogVisible: false
    }
  },
 
  methods: {
    //  入驻
    addInfo() {
      this.checkDialogVisible = true
    }
  }
}
</script>

子组件 upload.vue
<template>
  <div class="con_form">
    <el-form ref="addForm" :model="addForm" class="demo-comCreditForm" label-width="200px">
      <el-form-item label="企业名称：" prop="name"> <el-input v-model="addForm.name" placeholder="转贷机构名称" /> </el-form-item>
      <el-form-item label="统一社会信用代码：" prop="code"> <el-input v-model="addForm.code" placeholder="请输入统一社会信用代码" /> </el-form-item>
      <div class="upload_icon">
        <el-form-item label="上传：" prop="addForm">
          <el-upload
            :auto-upload="false"
            :limit="limitCount"
            :on-remove="handleRemove"
            :on-change="onChange"
            :on-success="handleSuccess"
            :file-list="fileList"
            :data="uploadData"
            :before-upload="beforeAvatarUpload"
            action="#"
            class="avatar-uploader"
            list-type="picture-card"
            accept="image/jpg,image/jpeg,image/png">
            <img v-if="url" :src="url" class="el-upload-list__item-thumbnail"></img>
            <i v-else slot="default" class="el-icon-plus" />
          </el-upload>
          <div class="el-upload__tip">jpg.jpeg、png格式，大小5M以内</div>
        </el-form-item>
      </div>
    </el-form>
  </div>
 
</template>
 
<script>
export default {
  data() {
    return {
      limitCount: 1,
      url: '',
      onChangeImgUrl: '',
      uploadData: {
        name: 'testFile'
      },
      fileList: [],
      //  申请入驻银行 表单
      addForm: {
        name: '',
        code: '' //  社会信用代码
      }
    }
  },
  watch: {
    onChangeImgUrl: {
      handler(newName) {
        var aa = document.querySelector('.el-upload--picture-card')
        if (newName) {
          aa.style.display = 'none'
        } else {
          setTimeout(() => {
            aa.style.display = 'inline-block'
          }, 1100)
        }
      }
    }
  },
  methods: {
    onChange(file, fileList) {
      this.onChangeImgUrl = file.url
    },
    handleRemove(file, fileList) {
      this.onChangeImgUrl = ''
    },
    handleSuccess(file, fileList) {
      this.$set(this.myForm, 'netTgThumbnail', fileList.response.bean.result.fileUrlPath)
    },
    // 限制图片大小
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt5M
    }
  }
}
</script>
 
<style scoped lang="scss">
/deep/.upload_icon .el-form-item__content {
  position: relative;
  height: 190px;
}
.avatar-uploader {
  width: 145px;
  height: 145px;
  position: absolute;
  left: 0;
  top: 0;
}
.con_form .upload_icon .el-form-item__content .el-upload__tip {
  position: absolute;
  left: 0;
  bottom: 0;
  color: red;
}
</style>

# 关于我

Brath 是一个热爱技术的 Java 程序猿，公众号「InterviewCoder」定期分享有趣有料的精品原创文章！

非常感谢各位人才能看到这里，原创不易，文章如果有帮助可以关注、点赞、分享或评论，这都是对我的莫大支持！