el-upload上传文件时,只能上传一个文件,将limit设为1,结果出现第二次点击上传时不触发on-change方法,解决方法:
在HTML中:
<el-upload
action=""
ref="uploadFile"
style="display: inline-block;"
:show-file-list="false"
:on-change="ChangeFile"
:auto-upload="false"
:limit="2"
accept=".xlsx,.xls">
<el-button size="small">选择文件...</el-button>
<el-input v-model="batchUpload.fileName" placeholder="请选择文件" disabled size="small" style="width:367px;margin:0 10px;"></el-input>
</el-upload>
在方法中:
// 文件改变,判断文件类型方法
ChangeFile(file,fileList ) {
// 解决上传文件limit为1时,不触发onchange方法,在第二次调用的时候将第一个文件删除
if(this.$refs.uploadFile.uploadFiles.length>1){
this.$refs.uploadFile.uploadFiles.shift();
}
// 给文件名赋值
this.batchUpload.fileName = file.name;
// 判断文件类型
if (file.name.split('.').pop() !== 'xlsx'
&& file.name.split('.').pop() !== 'xls'
&& file.name.split('.').pop() !== 'XLSX'
&& file.name.split('.').pop() !== 'XLS') { // 类型有可能大写,记得要写
fileList = []
this.batchUpload.fileList = []
this.$message({
message: '请上传excel文件',
type: 'error'
})
} else {
this.batchUpload.fileList = fileList.length > 0 ? [file.raw] : [];
}
},
或者,单次上传后调用this.$refs.uploadFile.clearFiles();