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 事件的時候獲取到.

希望能幫助到大家，碰到問題不要怕，就是肝，程序員就是想盡辦法解決問題的.碰到問題花時間看基礎，一定會有辦法的. 加油！！！！！