最近在做一个图片列表的需求，要求选择图片之后，自动上传到阿里云服务器，然后动态展示。由于图片列表要求有预览，编辑，删除，替换，重命名，以及拖拽换位的需求，所以说，仅仅是上传组件的图片预览功能是满足不了现有需求的，因此，在上传结束后，拿到返回的数组之后，要同步去更新dom，将新返回的数组渲染出来。
但是，在测试过程中发现，当同时选择多张图片进行上传的时候，会出现一部分图片莫名其妙丢失的情况。由于图片的绑定是在change方法里面监测到成功的状态之后进行绑定，所以可以肯定的是，这部分丢失的图片并没有走失败的方法，因为监测到上传失败之后会有相应的提示，但是浏览器种并没有出现相应的提示。
打开控制台之后测试发现，有一部分请求是被浏览器cenceled掉了，而change方法里面是监听不到浏览器取消的操作的，所以说，这部分图片的丢失，是不容易被用户察觉到的。意识到问题的严重性，就要着手开始解决。
探索发现，由于更新dom会触发vue的render操作，而render的同时，浏览器会取消掉同时进行的上传操作，这就是问题的所在。既然更新dom会取消上传操作，那么等所有上传操作都完成之后，再去更新dom是不是问题就解决了呢？
但是，ant-design上传只有一个change的钩子可以监听文件的上传状态，并没有文件上传完成的钩子可以使用。而change方法是每进行一次上传操作都会触发change函数，换言之，当你同时选择了10张图片就行上传的时候，change方法就会触发10次。那么捕捉到最后一次上传动作，是不是就可以解决问题呢？但是如何才能捕捉到最后一次上传动作呢。
我们都知道，原生的文件上传都会有一个fileLIst数组供我们进行本地的渲染。查阅文档发现，ant-design也提供一个fileList数组可供操作。而change函数里面也能捕捉到这个fileList数组。既然能拿到fileList数组，那么问题就变得相对容易多了。
这时候，我们就需要获取到fileList的长度，然后我们可以在本地去维护一个变量，在每张图片上传成功的时候，对这个变量进行++，当这个变量的数值和fileList的长度相同的时候，也就意味着上传进行到了最后一张。这时候，我们就可以在上传完成之后，对dom进行渲染，在渲染完成的同时，将本地维护的这个变量初始化。这样问题就得到了很好的解决。
