注意:
1、el-upload的before-upload事件内的校验规则,只有在auto-upload="true"(实时上传)的时候才会生效,如果auto-upload="false",校验规则可写在手动上传的方法里。
2、el-upload的accept即使设置了接收的文件格式,仍可在选择文件时,选择右下角选择所有文件格式,绕开el-upload的格式校验,所以对文件格式很严格的场景下,可像下文内的校验一样,对文件格式进行单独判断。
methods: {
// 文件上传预处理
beforeUpload(file, fileList) {
if(file.status !== 'ready') {
return false;
}
// 文件名称长度校验
let fileNameLen = file.name.length;
if(fileNameLen > 256) {
this.$message({
message:'文件名称过长',
type:'error',
duration: 1000
});
// 文件列表内移除当前选择的文件
this.fileList = fileList.filter((item) => {return item != file});
return false;
}
// 文件格式校验
if(!/\.(xls|xlsx)/.test(file.name)) {
this.$message({
message: "请上传格式为xls、xlsx的文件",
type: "error",
duration: 1000
})
this.fileList = fileList.filter((item) => {return item != file});
return false;
}
// 文件大小校验
const fileSize = file.size / 1024 / 1024 < 5;
if(!fileSize) {
this.$message.error("文件大小不要超过5M");
this.fileList = fileList.filter((item) => {return item != file});
return false;
}
// 单文件控制
if(fileList.length > 1) {
fileList.splice(0, 1);
}
}
}