vue Upload上传组件的一个小实战

问题所在：今天遇到了一个需求，上传组件保证每次只上传一个文件，并且当用户选择下一个文件，在待上传列表中要将原文件替换成新选择的文件

尝试经过：刚开始我看到了官方API上面提供了:limit :on-exceed两个属性，可以用来限制上传文件的个数以及超过限制之后的处理方法handleExceed

:file-list="fileList">
:limit="1"
:on-exceed="handleExceed"
//files是本次选择的文件
//fileList是当前uploader对象中待上传的文件列表
handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },

按照这个思路，我就要在handleExceed方法中将本次选择的文件files 封装成一个列表赋值给this.fileList，就能实现我想要的效果，但是真正实施之后，发现handleExceed的两个参数files和fileList中的对象并不一致，我还需要额外的在添加一些参数，才能保证files封装之后的数组对象参数和uploader中的一致，这就有点大可不必了，所以我又换了另一种方法

真正解决方法：我偶然看见了:on-change这个属性，发现可以轻松的解决

:on-change="handleChange"
handleChange(file, fileList) {
        this.fileList = fileList.slice(-1);
      }

API上声明这个属性是在：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用。

所以只要我新添加了一个文件，我就直接获取当前uploader中待上传列表中的最后一个文件，赋值给this.fileList，就可以保证每次选取一个新文件之后，经过这个方法的处理，uploader当前上传列表中只有新选取的一个文件，完美解决了我的需求