在使用elementui的Upload 上传组件时,如下代码中使用了limit限定了上传的文件数量,并且做了上传文件数量超限的提示。在上传一个文件后,不删除已上传文件的时候,再次上传文件,会提示超出文件数量限制,并且不会触发onChange事件:
......
<el-upload
class="demo"
name="file"
ref="upload"
:limit="1"
:auto-upload="false"
accept=".xlsx,.xls"
:action="#"
:before-upload="beforeUploadFile"
:on-change="fileChange"
:on-exceed="exceedFile"
:file-list="fileList"
:on-remove="handleRemove"
>
<el-button slot="trigger" size="small" type="primary">选择文件</el-button>
<div class="el-upload__tip" slot="tip">选择批量查询的用户清单文件</div>
</el-upload>
......
// 文件超出个数限制时的钩子
exceedFile(files, fileList) {
this.$message.warning(
`只能选择 ${this.limitNum} 个文件导入,共选择了 ${files.length + fileList.length} 个文件`
);
},
// 文件状态改变时的钩子
fileChange(file, fileList) {
this.file = file.raw;
if (fileList.length > 0) {
this.fileList = [fileList[fileList.length - 1]]; // 获取最后一次选择的文件
}
},
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传
beforeUploadFile(file) {
let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
if (extension !== "xlsx" && extension !== "xls") {
this.$message.warning("只能上传后缀是.xlsx、.xls的文件");
}
},
// 文件列表移除文件时的钩子
handleRemove(file, fileList) {
this.fileList = [];
},
......
实际项目中想要的效果是:限制只能上传一个文件,并且直接覆盖原来的文件上传。此时删除 :limit="1"和:on-exceed="exceedFile",在on-change的fileChange中通过this.fileList = [fileList[fileList.length - 1]]; 获取最后一次选择的文件即可。