element-ui的el-upload 判断上传前选择文件和当前表单存储文件之和超出限制取消上传

问题描述：

今天在修改一个上传组件时发现，使用element-ui 的 :limit 和:on-exceed 发现 有时候未超过限制就提示，文件个数超出，不能上传。这里我在 before-upload 中做了判断，但是又发现 before-upload中没有选择的多少文件的参数。

解决方案：

这里的解决办法是通过原生js获取选择了多少文件，通过页面调试我们就可以发现，el-upload 本质上还是一个 input，拿到 input 的上传数，和我们当前列表的长度，就可以在before-upload 判断是否提示用户，并终止上传。

		<el-upload
              class="upload-file"
              ref="uploadComponents"
              :action="uploadUrl"
              :disabled="uploadDisabled"
              multiple
              :show-file-list="false"
              :headers="headers"
              :on-success="uploadSuccess"
              :on-progress="upprogress"
              :on-error="uperror"
              :on-change="changeData"
              :before-upload="uploadbefore"
            >
              <el-button @click="throttle" size="small" type="primary">点击上传el-button>
            el-upload>

throttle() {
      this.iSthrottle = false
      this.cancelUpload = false
    },
    uploadbefore(file) {
      if (this.cancelUpload == true) {
        
        if (this.iSthrottle == false) {
          this.$message({
            message: '只能上传'+this.uploadLimit+'个文件，超过'+this.uploadLimit+'个文件请压缩后上传！',
            type: 'warning',
            duration: 7000,
          });
          this.iSthrottle = true
        }

        return false  //这里直接  return false 会取消 上传操作
        
      }
    },
     changeData(file, fileList) {

      var upload_img = document.getElementsByClassName('upload-file')
      console.log('upload_img',upload_img);
      if (upload_img && upload_img.length > 0) {
        var upload = upload_img[0].getElementsByTagName('input')
        if (upload && upload.length > 0 && upload[0].files && upload[0].files.length > 0) {
          this.uploadNum = upload[0].files.length
        }
      }
      if ((this.uploadNum + this.uploadFileList.length) > this.uploadLimit) {
        this.cancelUpload = true
      }
    

创作不易，如能对您有所帮助，感谢您的支持，欢迎打赏，充电