![a6eb0b07f455e9ee5f5d6771683fdaf8.png](https://i-blog.csdnimg.cn/blog_migrate/5e5e99a469ebd75c9bd40c79b5fa6323.jpeg)
vue小白请补充vue知识后前来围观
翻开el-upload源码,
1.我们看到他有一个prop属性
![5cc7f4ff32e0552886d1688889e47b50.png](https://i-blog.csdnimg.cn/blog_migrate/8060f0ad57466c05910082e10d30130a.png)
这个就是我们在页面调用el-upload组件时可以传入的参数之一,如下图:
![3d51eb121b0778d4bdc8e15909f84059.png](https://i-blog.csdnimg.cn/blog_migrate/f8b909be644088605af66482e6ece089.jpeg)
2.源码中还有一个data属性uploadFiles:
![5122e0d8932561b3b2bf27c81c4eef0f.png](https://i-blog.csdnimg.cn/blog_migrate/1735e69d097248ef7dcbc0a0083cfc52.png)
在讲uploadFiles存放的是什么之前,我们讲下el-upload 中选择了文件后,文件经历的三种状态(这里我们不探讨手动上传,只拿选一个立即自动上传的情景来讲课,因为本课的主题是文件列表的变化)
1.当我们点击el-upload打开本地文件选择框后,那一条File数据会有个status的状态标志,值为'ready'
![04401ea817a88c7681ae2af6d8f668bd.png](https://i-blog.csdnimg.cn/blog_migrate/bbb5ed47c6e2a0dff46d712b6655e305.jpeg)
2.选完文件开始自动上传,当得到服务器接口响应后,el-upload会进入success回调,这里会把status置为'success'
![46cc96f98fcd58f15cac8d726f0b8a50.png](https://i-blog.csdnimg.cn/blog_migrate/9a518d33b85cc7eecbcfe3b6527ce591.jpeg)
界面显示上,后面有沟的那条数据其实就是success状态的
![aeeaf9d0b1c6860dd79a592cf31cf02a.png](https://i-blog.csdnimg.cn/blog_migrate/f52cb99471d3ed80a9de7f83f4b9431a.png)
这里有个大坑,为什么我说的是得到服务器响应,而不是上传成功,因为服务器上传接口里报错了,文件其实没成功也会给响应到el-upload,所以这个文件其实是上传失败了,
有需要的朋友可以在自己监听on-success方法
![5cc85e71f5c3690a6d0903c7897ccf56.png](https://i-blog.csdnimg.cn/blog_migrate/c8eebcb8950d19fa72c748e59fee5f19.png)
判断response.code(这个接口返回的具体key需要自己和后台人员确认)来得知文件到底是否成功,如果不成功,可以通过file.status = 'ready' 或 'fail' 重置这条实际上传失败的文件status
最后,当el-upload未得到服务器响应,会进入on-error回调,这里会把status置为fail,并把这条数据从列表中移除,注意是直接移除了
![bc49ba13b178a8e31994d70503dcc760.png](https://i-blog.csdnimg.cn/blog_migrate/c001fc22e027e40bf9fd93a87362eb34.jpeg)
可能有朋友需要在列表中保留上传失败的文件,方便最后再次尝试重传,这里我提供一个保留在列表中的解决方案,重传这里就不讲了
自己监听on-error方法
![4bb0cb45fe73f631d12dcb717fb6d94a.png](https://i-blog.csdnimg.cn/blog_migrate/d13b9d583f13c172c3f3a1f1e856a56f.png)
将file重新push到fileList中
好了,中途插入了选择文件后的生命周期,这方便我们更轻松的理解filelist的变化过程
下面回归主题:
最上面第二点我们提到源码中的data属性uploadFiles
uploadFiles的变化可以拆分为两处
1.外部传入属性filelist发生变化,uploadFiles 直接等于 filelist
![67997db946269a0b2fcd222120d73dfe.png](https://i-blog.csdnimg.cn/blog_migrate/25921a6acd9df874d1512b6ca656719e.jpeg)
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') {
}
}
本次分享就到这,我是摩托卡,一个全栈救火员。