vue上传组件before-upload失效

前言

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"并不能限制上传文件类型，只是默认显示指定类型的文件，在电脑上选择文件那里还是可以手动改为所有类型，去选择其他类型的