element-UI 文件批量上传Upload填坑

官方文档： https://element.eleme.cn/#/zh-CN/component/upload
element-UI 提供的上传文件组件提供了各种配置项和钩子函数，在使用中遇到了这样的：

坑1.0

上传文件成功的个数和选中的文件个数不一致，出现了文件丢失的情况，控制台也无任何报错

查阅官方文档，排查后发现 el-upload 组件中的 file-list 是 只读 的，其中保存了本次上传选中的文件，在一次上传完成后 file-list 中的文件依然存在，这时如果继续上传文件，需要清除 file-list 中上次上传的文件缓存。 但是直接改变 file-list 数组中的值就会出现如上情况。

解决办法

<el-upload
      class="lu-upload"
      ref="uploadFiles"
      :show-file-list="false"
      :action="this.UploadAddress"
      :on-preview="handlePreview"
      :before-upload="checkFileMessage"
      :on-success="handleSuccess"
      multiple
      :limit="filesLimit"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :disabled="fileObj.isDisabled || fileObj.fileList.length >= (fileObj.maxLength)"
    >
      <el-button
        :disabled="fileObj.isDisabled || fileObj.fileList.length >= (fileObj.maxLength)"
        @click="handleFilesNum">+ 选择导入附件</el-button>
    </el-upload>

使用 ref="uploadFiles" 获取组件中的上传文件列表，在点击上传按钮的函数中调用this.$refs.uploadFiles.clearFiles(); 清空上次选中的文件列表，这样就可以保证每次上传之前 file-list 都是空的。

坑 2.0

因为上述 file-list 的只读特性，上传文件的个数也收到了影响
注：
el-upload 组件中限制上传文件个数的 limit 限制的是本次上传文件选中的文件个数。

实际需求中，文件上传列表需要显示已经上传的文件，并且限制文件个数为上传的总文件个数。所以在这里使用了自定义文件列表，设置属性:show-file-list="false" 不显示组件自带的文件列表。

:limit="filesLimit" 所以每次上传的文件个数限制是可变的，通过watch监听已上传的文件列表，用可上传的总文件个数减去已经已存在的文件个数，赋值给limit（本次可上传文件个数）

watch: {
    fileObj: {
      handler: function(val) {
        if (val) {
          this.filesLimit = val.maxLength - val.fileList.length;
        }
      },
      immediate: true,
      deep: true
    }
  }