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')

      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

          console.log(this.uploadNum)

        }

      }

    },

必须是放在 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 事件的时候获取到.

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