el-upload控制台错误Cannot set property 'status' of undefined的原因和解决办法

今天在测试的时候发现上传空文件时，控制台会报错，之后上传文件会失败。

定位问题

1. 查看控制台报错
   可以知道是elementUI组件出了问题
   

2. 断点调试
   

调试发现是getFile返回undefined，查看getFile方法，this.uploadFiles为空，未进入every循环，而this.uploadFiles的值来自fileList，而fileList由父组件传入。所以原因出在父组件fileList传值的问题上。

function getFile(rawFile) {
  var fileList = this.uploadFiles;
  var target = void 0;
  fileList.every(function (item) {
    // 优化，如上传过不在上传
    target = rawFile.uid === item.uid ? item : null;
    return !target;
  });
  return target;
}

3. 最终定位问题
   在父组件中发现uploadChange属性的函数做了文件大小过滤，导致fileList数据错误。呵呵，前人留下的bug

_uploadChange (file, fileList) {
  fileList = fileList.filter(ele => {
    return ele.size < 1024 * 1024 * 100 && ele.size > 0
  })
},

解决方法

文件过滤应该放在beforeUpload中，显式返回false即可过滤文件中止上传。

_beforeUpload (file) {
  if (file.size > 1024 * 1024 * 100) {
    this.$message({
      message: "单个文件 " + file.name + " 不能大于100M",
      type: "warning"
    })
    return false
  } else if (file.size <= 0) {
    this.$message({
      message: "文件 " + file.name + " 不能为空",
      type: "warning"
    })
    return false
  }
}