element-ui Upload多文件一次上传，获取选择的文件的数量

原文地址： element-ui Upload多文件一次上传，获取选择的文件的数量 - _终于小学毕业 - 博客园 

前段时间碰到一个脑瓜贼疼的问题，后台管理有个需求，需要一次性多选文件，且选择后马上上传文件.用的是element-ui

百度找不到，element不提供选择数量属性，网上大部分提供的方案都是选择后手动插入FrameData 表单再手动提交，有点麻烦啊

也尝试了数十种变量判断算法，实在不行，再程序员不服气毅力趋势下，花了好长时间N天的摸爬滚打，跟了数十遍element 源码,

分析了input 对象的所有属性，终于让俺获取到了上传数量

先上代码后分析:

 <el-upload
            ref="fileUpload"
            v-loading="fileloading"
            class="upload-file"
            :action="uploadUrl"
            :multiple="true"
            :limit="9"
            :on-preview="handleFilePreview"
            :on-remove="handleFileRemove"
            :on-error="handleError"
            :on-exceed="handExceed"
            :on-change="handFileChange"
            :http-request="uploadFileFile"
            :before-upload="beforeFileAvatarUpload"
            :file-list="data.wArticleAnnexes_temp"
            :headers="headers"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">上传任意文件</div>
          </el-upload>
 
  handFileChange(files, fileList) {
      var upload_img = document.getElementsByClassName('upload-file')
      let uploadNum = 0
      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) {
          uploadNum = upload[0].files.length
        }
      }

       this.addNum++
        this.fileList = fileList;
        if(this.addNum == uploadNum) {
          console.log('可以上传', this.fileList)
        }
    },

必须是放在 handChange里面获取,就能获取到了

1.先说说原理

文件上传本质上是通过input 标签上传，不管是element 或者其他第三方，用的intput 标签

input 提供了on-change 事件，在文件选择完成后就能获取到获取的文件数量，和文件信息，element-ui 的upload 其实用的也是input 从下面这段element 源码中就能看出，上element upload源码

render(h) {
    let {
      handleClick,
      drag,
      name,
      handleChange,
      multiple,
      accept,
      listType,
      uploadFiles,
      disabled,
      handleKeydown
    } = this;
    const data = {
      class: {
        'el-upload': true
      },
      on: {
        click: handleClick,
        keydown: handleKeydown
      }
    };
    data.class[`el-upload--${listType}`] = true;
    return (
      <div {...data} tabindex="0" >
        {
          drag
            ? <upload-dragger disabled={disabled} on-file={uploadFiles}>{this.$slots.default}</upload-dragger>
            : this.$slots.default
        }
        <input class="el-upload__input" type="file" ref="input" name={name} on-change={handleChange} multiple={multiple} accept={accept}></input>
      </div>
    );
  }

  handleChange(ev) {
      const files = ev.target.files;

      if (!files) return;
      this.uploadFiles(files);
    },

从上面2端代码可以看出，element 也是这样获取文件数量的，知道了这个真相就好办了，

只要找到存放文件的input不就好了吗，找了很久 element upload 其实是有2个组件， 外部index.vue组件创建的upload子组件，所以不比较不好找，只能从f12 里面一个个去跟踪

最终发现 在elemet-upload的Dom下面有多个 上传input 真实的是第0个 ，且只能在onchange 事件的时候获取到.

希望能帮助到大家，碰到问题不要怕，就是肝，程序员就是想尽办法解决问题的.碰到问题花时间看基础，一定会有办法的. 加油！！！！！