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
  }
}