问题所在:今天遇到了一个需求,上传组件保证每次只上传一个文件,并且当用户选择下一个文件,在待上传列表中要将原文件替换成新选择的文件
尝试经过:刚开始我看到了官方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
当前上传列表中只有新选取的一个文件,完美解决了我的需求