文件上传 xmlhttprequest 上传失败 走error_聊一聊el-upload中的文件列表的生命周期...

vue小白请补充vue知识后前来围观

翻开el-upload源码，

1.我们看到他有一个prop属性

这个就是我们在页面调用el-upload组件时可以传入的参数之一，如下图：

2.源码中还有一个data属性uploadFiles：

在讲uploadFiles存放的是什么之前，我们讲下el-upload 中选择了文件后，文件经历的三种状态（这里我们不探讨手动上传，只拿选一个立即自动上传的情景来讲课，因为本课的主题是文件列表的变化）

1.当我们点击el-upload打开本地文件选择框后，那一条File数据会有个status的状态标志，值为'ready'

2.选完文件开始自动上传，当得到服务器接口响应后，el-upload会进入success回调，这里会把status置为'success'

界面显示上，后面有沟的那条数据其实就是success状态的

这里有个大坑，为什么我说的是得到服务器响应，而不是上传成功，因为服务器上传接口里报错了，文件其实没成功也会给响应到el-upload，所以这个文件其实是上传失败了，

有需要的朋友可以在自己监听on-success方法

判断response.code（这个接口返回的具体key需要自己和后台人员确认）来得知文件到底是否成功，如果不成功，可以通过file.status = 'ready' 或 'fail' 重置这条实际上传失败的文件status

最后，当el-upload未得到服务器响应，会进入on-error回调，这里会把status置为fail，并把这条数据从列表中移除，注意是直接移除了

可能有朋友需要在列表中保留上传失败的文件，方便最后再次尝试重传，这里我提供一个保留在列表中的解决方案，重传这里就不讲了

自己监听on-error方法

将file重新push到fileList中

好了，中途插入了选择文件后的生命周期，这方便我们更轻松的理解filelist的变化过程

下面回归主题：

最上面第二点我们提到源码中的data属性uploadFiles

uploadFiles的变化可以拆分为两处

1.外部传入属性filelist发生变化，uploadFiles 直接等于 filelist

2.就是我上面讲到的单个文件的生命周期

a.选择一个文件，uploadFiles插入一条数据，status为ready

b.上传成功，数据不变，那一条文件status变为success

c.上传失败，数据被移除出列表

结合上述两点，我们就清晰地认识到el-upload的文件列表变化过程了。

最后告诉大家如何在自己页面中获取el-upload的文件列表

<el-upload ref="upload"/>

for (var i = 0; i < this.$refs.upload.uploadFiles.length; i++) {
  if (this.$refs.upload.uploadFiles[i].status === 'ready') {
   
  }
  if (this.$refs.upload.uploadFiles[i].status === 'success') {   
  
  }
  if (this.$refs.upload.uploadFiles[i].status === 'fail') {   
  
  }
}

本次分享就到这，我是摩托卡，一个全栈救火员。