前言
el-upload组件设置:auto-upload="false"后,自带的before-upload属性不会触发,需要在手动上传前编写校验代码
关键代码
// 选择文件
uploadChange(file) {
if (!this.beforeUpload(file)) {
this.$refs.uploadCom.clearFiles();
return;
}
const uploadData = new FormData();
if (file.raw) {
uploadData.append('file', file.raw);
}
// TODO调用后台上传接口,将uploadData作为参数传给后台
}
// 自己写的文件校验方法
beforeUpload(file) {
const acceptTypes = [];// 将支持的文件类型配置在这个数组中
const isFormat = acceptTypes.includes(file.raw.type);
const maxsize = 10;// 定义文件大小不超过10M
const isLtMaxsize = file.size / 1024 / 1024 < maxsize;
if (!isFormat) {
this.$message.error('导入文件格式错误,请重新选择文件导入');
}
if (!isLtMaxsize) {
this.$message.error(`文件大于${maxsize}M,请重新选择文件导入`);
}
return isFormat && isLtMaxsize;
}
注意事项
给el-upload组件设置属性accept=".xlsx,.xls"并不能限制上传文件类型,只是默认显示指定类型的文件,在电脑上选择文件那里还是可以手动改为所有类型,去选择其他类型的